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

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

示例代码：

/* 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>

最佳答案

li + li的css向底部li添加了2px的margin-top。当工具提示附加到dom时，在激活它的项目下方，它将删除边距。要解决此问题，请将工具提示添加到锚标记。

修复示例代码：

/* 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>

关于css - 工具提示会导致bootstrap3导航列表项在悬停时反弹，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36925450/