Bootstrap Tooltip working but hidden due to z-index?

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>

Just set the tooltip position to fixed, like this:

.tooltip {
    position: fixed;
}

See working demo

Just set data-container.

<a href="#" data-toggle="tooltip" data-container="body" title="first tooltip">
hover over me</a>

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>

Bootstrap Tooltip working but hidden due to z-index?

Relevant code

Complete example

Tooltip that Follows a div with overflow scroll

Related

Recent Posts