css - 工具提示导致 bootstrap3 导航列表项在悬停时反弹

Question

我在 <li> 中添加了工具提示我的 boostrap 导航栏的元素，并注意到列表项在工具提示显示时弹跳。我希望在没有弹跳的 Bootstrap 菜单上有工具提示。

示例代码:

/* Latest compiled and minified JavaScript included as External Resource */
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<div class="container">
<p>
Hover over menu items to activate tooltip. </p><p>

The 2px margin-top is removed from li+li styling when tooltip div is appended to dom.  
</p>

<nav class="navbar navbar-default hidden-print">
<div id="navbartemplate" class="collapse navbar-collapse">

        <ul class="nav nav-pills nav-stacked nav-custom">

  <li><a class="active" href="#home">Home</a></li>
  <li data-toggle="tooltip" data-placement="top" title="Your mailing address on file"><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
</div>
</nav>
</div>

Answer 1

li+li 的 css 为 bottom li 添加了 2px 的 margin-top。当工具提示附加到 dom 时，在激活它的元素下方，它会删除边距。要解决此问题，请将工具提示添加到 anchor 标记。

示例修复代码:

/* Latest compiled and minified JavaScript included as External Resource */
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">
 
<nav class="navbar navbar-default hidden-print">
<div id="navbartemplate" class="collapse navbar-collapse">

        <ul class="nav nav-pills nav-stacked nav-custom">

  <li><a class="active" href="#home">Home</a></li>
  <li ><a href="#news"  data-toggle="tooltip" data-placement="top" title="Your mailing address on file">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
</div>
</nav>
</div>