工具提示導致bootstrap3導航列表項在懸停時反彈

Question

我向我的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>

Answer 1

對Li +的LI中的CSS增加的2px的餘量-頂部向底部裏。當工具提示被添加到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>