Bootstrap Tooltip working but hidden due to z-index?

Question

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 c

Answer 1

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

Answer 2

Position: Fixed !important; works here, but don't forget !important in some cases.

Answer 3

if we add the attribute container="body" into your html tag then it's not moving with html element on page scroll

Answer 4

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

Answer 5

just add the attribute container="body" into your html tag

Answer 6

Just set the tooltip position to fixed, like this:

.tooltip {
    position: fixed;
}

See working demo