Bootstrap Tooltip working but hidden due to z-index?
JavascriptCssTwitter BootstrapJavascript Problem Overview
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>
Javascript Solutions
Solution 1 - Javascript
Solution 2 - Javascript
Just set data-container
.
<a href="#" data-toggle="tooltip" data-container="body" title="first tooltip">
hover over me</a>
Solution 3 - Javascript
Don't use position: fixed
for this, it looks like it works but will cause problems later on.
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.
$('.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 div
even if the whole box scrolls independently from the body. Just make sure the container has position: relative
.
As mentioned in Diego's answer, you can use any option above as a data attribute:
<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
I added a .container
div around the original snippet, made it small to force scrolling on overflow. You can see the tooltip follows the pencil icon when scrolling.
$('.nav-text').click(function() {
console.log('heyo');
}).tooltip({
placement: 'right',
title: 'heyo',
// follows the box even if it is scrolled within the 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>
Solution 4 - Javascript
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:
$uibTooltipProvider.options({
appendToBody: true
});
Solution 5 - Javascript
If building bootstrap (4.5) with npm (SASS), you can adjust $zindex-tooltip
variable in your own variables.scss file.
in bootstrap 4.5 node_modules/bootstrap/scss/_variables.scss
@line 690
$zindex-tooltip: 1070 !default;
BTW, you can find all variables in that file
Solution 6 - Javascript
Position: Fixed !important; works here, but don't forget !important in some cases.
Solution 7 - Javascript
just add the attribute container="body"
into your html tag
Solution 8 - Javascript
if we add the attribute container="body" into your html tag then it's not moving with html element on page scroll