Unable to get Bootstrap Tooltip to display above div when inside scroll pane

问题

Currently I have 2 panes/columns on my site page displayed side by side. The left column is a search pane and should remain fixed within the page height. While the right column displays search results and has its y-overflow set to scroll as there is too many results to fit within the height of the main page.

I have bootstrap tooltips that can be toggled on/off (instead of on hover) and will display next to each search result. Because I am running out of space on my page these tooltips will extend into the left searchpane and need to be dispalyed above this pane. However because of the scrollpane and despite every effort to play with all z-indexs and position types, I cannot get my tooltips to display above the search pane.

I've created a simple jsfiddle with one of these tooltips being displayed behind the search pane. For simplicity sake I just created a red div with the text "tooltip" to represent my bootrap tooltip:

https://jsfiddle.net/81xcr0xp/3/

HTML:

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-6">
            <div class="main-content"><p>Search Pane</p></div>
        </div>
        <div class="sidebar col-sm-6 hidden-xs  col-sm-offset-6">
            <p>Search Results Pane:</p>
            <div class="tooltip1"><p>TOOLTIP</p></div>
            <ul id="list"></ul>
        </div>
    </div>
</div>

CSS:

 .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid grey;
}

.tooltip1{
  position:absolute;
  top: 50px;
  left: -5px;
  z-index: 1000;
   background-color:red;
}