Question

我将工具提示添加到我的boostrap导航栏的<li>元素中，并注意到工具提示显示时列表项会反弹。我想在没有反弹的情况下在自举菜单上提供工具提示。

示例代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

示例代码修复：

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: