ツールチップにより、ブートストラップ3のナビゲートリストアイテムがホバリングでバウンスする

Question

私はブーストラップのnavbarの<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 +のリチウムのCSSは、底部のLiに2ピクセルのマージントップを追加します。ツールヒントが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>