引导工具提示工作，但隐藏由于Z指数？
如果你把鼠标hover在第一支铅笔上，你可以看到工具提示，但是它隐藏了。
我怎么能告诉所有的工具提示显示高于一切？
相关的代码
$('.nav-text').on('click', null, function () { alert('heyo'); }); $('.nav-text').tooltip({ 'placement': 'right', 'title': 'heyo' }); 完整的例子
$('.down').click(function() { var $move = $('.side-study-box ul'); $move.css({ top: '-=20px' }) }) $('.up').click(function() { var $move = $('.side-study-box ul'); $move.css({ top: '+=20px' }) }) $('.nav-text').on('click', null, function() { alert('heyo'); }); $('.nav-text').tooltip({ 'placement': 'right', 'title': 'heyo' });
.side-study-box { background-color: white; color: black; border: 1px solid #3D6AA2; text-align: center; height: 160px; display: table !important; margin: 0px !important; margin-left: -1px !important; } .side-study-box .viewport { height: 120px; overflow: hidden; position: relative; } .side-study-box span { position: relative; width: 100%; font-size: 24px; display: table-cell; vertical-align: middle; } .side-study-box textarea { position: relative; height: 195px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; margin: auto; font-size: 18px; font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New; display: table-cell; vertical-align: middle; resize: none; } .side-study-box i { margin: 0px !important; padding-right: 1px; } .side-study-box .side-box-menu { border-right: 1px solid #335987; width: 28px; text-align: center; height: 100%; } .side-box-menu-nav { display: inline-block; cursor: pointer; text-decoration: none !important; margin: 0px; width: 100%; background-color: #3D6AA2; color: white; } .side-box-menu-nav:hover { background-color: #335987 !important; color: white !important; } .side-study-box ul { list-style-type: none; margin: 0px; margin-left: -1px !important; padding: 0px; padding-right: 2px; height: 100%; color: #335987; position: absolute; top: 0; } .side-study-box ul li { margin: 0px; } .side-study-box ul li :hover { color: black; } .side-study-box ul li a { padding-left: 3px; cursor: pointer; text-decoration: none; display: inline-block; margin: 0px; color: gray; } .side-study-box ul li a .side-box-menu-control { padding-top: 3px; height: 23px; }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" /> <script src="ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script> <div class="span4 side-study-box"> <div class="side-box-menu"> <a class="side-box-menu-nav up"><i class="icon-chevron-up icon-white"></i></a> <div class='viewport'> <ul> <li><a class="side-box-menu-control"><i class="icon-facetime-video "></i></a> </li> <li><a class="side-box-menu-control"><i class="icon-picture"></i></a> </li> <li><a class="side-box-menu-control"><i class="icon-headphones "></i></a> </li> <li><a class="side-box-menu-control nav-text"><i class="icon-pencil "></i></a> </li> <li><a class="side-box-menu-control"><i class="icon-pencil "></i></a> </li> <li><a class="side-box-menu-control"><i class="icon-pencil "></i></a> </li> <li><a class="side-box-menu-control"><i class="icon-pencil "></i></a> </li> <li><a class="side-box-menu-control"><i class="icon-hdd"></i></a> </li> <li><a class="side-box-menu-control"><i class="icon-hdd"></i></a> </li> <li><a class="side-box-menu-control"><i class="icon-hdd"></i></a> </li> </ul> </div><a class="side-box-menu-nav down"><i class="icon-chevron-down icon-white"></i></a> </div> </div>
只需将工具提示位置设置为fixed ，如下所示：
.tooltip { position: fixed; }
查看工作演示
只需设置data-container 。
<a href="#" data-toggle="tooltip" data-container="body" title="first tooltip"> hover over me</a>
不要使用position: fixed的，这是更多的临时修复看起来工作，但会导致以后的问题。
在你的情况下，最好的select是将工具提示附加到正文（正如@machineaddict在评论中提到的那样 ），以确保它跟随滚动的铅笔，固定的位置不会。
$('.nav-text').tooltip({ placement: 'right', title: 'heyo', container: 'body' //<--- use the container option });
你甚至可以更具体地使用container: '.side-study-box'来确保工具提示符合div即使整个盒子独立于主体卷动。 只要确保容器有position: relative 。
正如迭戈的回答中所提到的 ，您可以使用上面的任何选项作为数据属性：
<a class="nav-text" data-toggle="tooltip" data-container=".side-study-box" data-placement="right" title="heyo"> ... </a>
工具提示跟随与溢出滚动的div
我在原始代码片段周围添加了一个.container div，使它在强制滚动时很小。 滚动时，您可以看到工具提示跟随铅笔图标。
$('.nav-text').click(function() { console.log('heyo'); }).tooltip({ placement: 'right', title: 'heyo', // follows the box even if it is scrolled withinthe container div. container: '.container', });
.container { height: 100px; overflow: scroll; position: relative; } .side-study-box { background-color: white; color: black; border: 1px solid #3D6AA2; text-align: center; height: 160px; display: table !important; margin: 0px !important; margin-left: -1px !important; } .side-study-box .viewport { height: 120px; overflow: hidden; position: relative; } .side-study-box span { position: relative; width: 100%; font-size: 24px; display: table-cell; vertical-align: middle; } .side-study-box textarea { position: relative; height: 195px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; margin: auto; font-size: 18px; font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New; display: table-cell; vertical-align: middle; resize: none; } .side-study-box i { margin: 0px !important; padding-right: 1px; } .side-study-box .side-box-menu { border-right: 1px solid #335987; width: 28px; text-align: center; height: 100%; } .side-box-menu-nav { display: inline-block; cursor: pointer; text-decoration: none !important; margin: 0px; width: 100%; background-color: #3D6AA2; color: white; } .side-box-menu-nav:hover { background-color: #335987 !important; color: white !important; } .side-study-box ul { list-style-type: none; margin: 0px; margin-left: -1px !important; padding: 0px; padding-right: 2px; height: 100%; color: #335987; position: absolute; top: 0; } .side-study-box ul li { margin: 0px; } .side-study-box ul li :hover { color: black; } .side-study-box ul li a { padding-left: 3px; cursor: pointer; text-decoration: none; display: inline-block; margin: 0px; color: gray; } .side-study-box ul li a .side-box-menu-control { padding-top: 3px; height: 23px; }
<script src="ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script> <div class="container"> <div class="span4 side-study-box"> <div class="side-box-menu"><a class="side-box-menu-nav up"><i class="icon-chevron-up icon-white"></i></a> <div class='viewport'> <ul> <li><a class="side-box-menu-control"><i class="icon-facetime-video "></i></a> </li> <li><a class="side-box-menu-control"><i class="icon-picture"></i></a> </li> <li><a class="side-box-menu-control"><i class="icon-headphones "></i></a> </li> <li><a class="side-box-menu-control nav-text"><i class="icon-pencil "></i></a> </li> <li><a class="side-box-menu-control"><i class="icon-pencil "></i></a> </li> <li><a class="side-box-menu-control"><i class="icon-pencil "></i></a> </li> <li><a class="side-box-menu-control"><i class="icon-pencil "></i></a> </li> <li><a class="side-box-menu-control"><i class="icon-hdd"></i></a> </li> <li><a class="side-box-menu-control"><i class="icon-hdd"></i></a> </li> <li><a class="side-box-menu-control"><i class="icon-hdd"></i></a> </li> </ul> </div><a class="side-box-menu-nav down"><i class="icon-chevron-down icon-white"></i></a> </div> </div> </div>
这是最好的解决scheme，如果你使用的angular度uib-bootstrap：使用$ uibTooltipProvider的dependency injection，你可以改变默认的工具提示和popup行为的方式; 上面的属性总是优先的：
$uibTooltipProvider.options({ appendToBody: true });
位置：固定！重要; 在这里工作，但不要忘记！在某些情况下很重要。
只需将属性container="body"到您的html标记中
