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

Answer 1

Just set the tooltip position to fixed, like this:

.tooltip {     position: fixed; } 

See working demo

Answer 2

Just set data-container.

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