引导工具提示工作,但隐藏由于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标记中