Tooltip bewirkt, dass Bootstrap3-Navigationslistenelemente auf Schwebeflug springen

Question

Ich habe Tooltips zu den <li> Elementen meiner Boostrap-Navigationsleiste hinzugefügt und festgestellt, dass die Listenelemente abprallen, wenn der Tooltip angezeigt wird. Ich hätte gerne Tooltips in einem Bootstrap-Menü ohne Bounce.

Beispielcode:

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

Die CSS für li + li fügt eine margin-top von 2px nach unten li. Wenn der Tooltip dem Dom zugewiesen wird, entfernt er unter dem Objekt, das ihn aktiviert, den Rand. Um dies zu beheben, fügen Sie dem Anker-Tag den Tooltip hinzu.

Beispiel-Code von Fix:

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