CSS Bootstrap 工具提示工作但由于 z-index 而隐藏？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16863015/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Tooltip working but hidden due to z-index?
提问by RobVious
If you hover over the first pencil, you can see the tooltip coming up but it's hidden.
如果您将鼠标悬停在第一支铅笔上，您可以看到工具提示出现，但它是隐藏的。
How can I tell all tooltips to show up above everything else?
我怎样才能告诉所有工具提示显示在其他一切之上？
Relevant code
相关代码
$('.nav-text').on('click', null, function () {
alert('heyo');
});
$('.nav-text').tooltip({
'placement': 'right',
'title': 'heyo'
});
Complete example
完整示例
$('.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="https://cdnjs.cloudflare.com/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>回答by Nelson
Just set the tooltip position to fixed, like this:
只需将工具提示位置设置为fixed，如下所示：
.tooltip {
position: fixed;
}
See working demo
查看工作演示
回答by Diego Mello
Just set data-container.
刚设置data-container。
<a href="#" data-toggle="tooltip" data-container="body" title="first tooltip">
hover over me</a>
回答by Emile Bergeron
Don't use position: fixedfor this, it looks like it works but will cause problems later on.
不要position: fixed用于此，它看起来有效，但稍后会导致问题。
In your case, the best option would be to append the tooltip to the body (as mentionned by @machineaddict in a comment) to ensure it follows the pencil on scroll, which fixed positioning won't.
在您的情况下，最好的选择是将工具提示附加到正文（如@machineacci 在评论中提到的那样）以确保它在滚动时跟随铅笔，而固定定位不会。
$('.nav-text').tooltip({
placement: 'right',
title: 'heyo',
container: 'body' //<--- use the container option
});
You could even be more specific and use container: '.side-study-box'to ensure the tooltip follows its diveven if the whole box scrolls independently from the body. Just make sure the container has position: relative.
您甚至可以更具体并用于container: '.side-study-box'确保工具提示遵循其div即使整个框独立于正文滚动也是如此。只要确保容器有position: relative.
As mentioned in Diego's answer, you can use any option above as a dataattribute:
正如Diego's answer 中提到的，您可以使用上面的任何选项作为数据属性：
<a class="nav-text"
data-toggle="tooltip"
data-container=".side-study-box"
data-placement="right"
title="heyo">
...
</a>
Tooltip that Follows a div with overflow scroll
跟随带有溢出滚动的 div 的工具提示
I added a .containerdiv around the original snippet, made it small to force scrolling on overflow. You can see the tooltip follows the pencil icon when scrolling.
我.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="https://cdnjs.cloudflare.com/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>回答by Enkode
This is best solution if you are using angular uib-bootstrap: Use dependency injection for $uibTooltipProvider, you can change the way tooltips and popovers behave by default; the attributes above always take precedence:
如果您使用 angular uib-bootstrap，这是最好的解决方案：对 $uibTooltipProvider 使用依赖注入，您可以更改默认情况下工具提示和弹出框的行为方式；上述属性始终优先：
$uibTooltipProvider.options({
appendToBody: true
});
回答by Hitesh
if we add the attribute container="body" into your html tag then it's not moving with html element on page scroll
如果我们将属性 container="body" 添加到您的 html 标记中，则它不会随页面滚动上的 html 元素一起移动
回答by Hamid Reza Sepehr
Position: Fixed !important; works here, but don't forget !important in some cases.
位置：固定！重要；在这里工作，但不要忘记 !important 在某些情况下。
回答by Danilo Gutiérrez
just add the attribute container="body"into your html tag
只需将该属性添加container="body"到您的 html 标签中
