title: Bootstrap Tooltip working but hidden due to z-index?
body: <p>If you hover over the first pencil, you can see the tooltip coming up but it's hidden.</p>
  
  <p>How can I tell all tooltips to show up above everything else?</p>
  
  <h1>Relevant code</h1>
  
  <pre><code>$('.nav-text').on('click', null, function () {
      alert('heyo');
  });
  $('.nav-text').tooltip({
      'placement': 'right',
          'title': 'heyo'
  });
  </code></pre>
  
  <h1>Complete example</h1>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.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'
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" /&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="span4 side-study-box"&gt;
    &lt;div class="side-box-menu"&gt; &lt;a class="side-box-menu-nav up"&gt;&lt;i class="icon-chevron-up icon-white"&gt;&lt;/i&gt;&lt;/a&gt;
  
      &lt;div class='viewport'&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a class="side-box-menu-control"&gt;&lt;i class="icon-facetime-video "&gt;&lt;/i&gt;&lt;/a&gt;
  
          &lt;/li&gt;
          &lt;li&gt;&lt;a class="side-box-menu-control"&gt;&lt;i class="icon-picture"&gt;&lt;/i&gt;&lt;/a&gt;
  
          &lt;/li&gt;
          &lt;li&gt;&lt;a class="side-box-menu-control"&gt;&lt;i class="icon-headphones "&gt;&lt;/i&gt;&lt;/a&gt;
  
          &lt;/li&gt;
          &lt;li&gt;&lt;a class="side-box-menu-control nav-text"&gt;&lt;i class="icon-pencil "&gt;&lt;/i&gt;&lt;/a&gt;
  
          &lt;/li&gt;
          &lt;li&gt;&lt;a class="side-box-menu-control"&gt;&lt;i class="icon-pencil "&gt;&lt;/i&gt;&lt;/a&gt;
  
          &lt;/li&gt;
          &lt;li&gt;&lt;a class="side-box-menu-control"&gt;&lt;i class="icon-pencil "&gt;&lt;/i&gt;&lt;/a&gt;
  
          &lt;/li&gt;
          &lt;li&gt;&lt;a class="side-box-menu-control"&gt;&lt;i class="icon-pencil "&gt;&lt;/i&gt;&lt;/a&gt;
  
          &lt;/li&gt;
          &lt;li&gt;&lt;a class="side-box-menu-control"&gt;&lt;i class="icon-hdd"&gt;&lt;/i&gt;&lt;/a&gt;
  
          &lt;/li&gt;
          &lt;li&gt;&lt;a class="side-box-menu-control"&gt;&lt;i class="icon-hdd"&gt;&lt;/i&gt;&lt;/a&gt;
  
          &lt;/li&gt;
          &lt;li&gt;&lt;a class="side-box-menu-control"&gt;&lt;i class="icon-hdd"&gt;&lt;/i&gt;&lt;/a&gt;
  
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;&lt;a class="side-box-menu-nav down"&gt;&lt;i class="icon-chevron-down icon-white"&gt;&lt;/i&gt;&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>