当滚动窗格内部时，无法获取Bootstrap Tooltip以显示上面的div

Question

目前，我的网站页面上并排显示了2个窗格/列。左栏是一个搜索窗格，应保持页面高度固定。右列显示搜索结果并将其y溢出设置为滚动，因为结果太多而无法在主页面的高度范围内显示。

我有引导工具提示可以打开/关闭（而不是悬停），并会显示在每个搜索结果旁边。由于我的页面空间不足，这些工具提示将延伸到左侧的搜索栏中，需要在此窗格上方展开。然而，由于使用了scrollpane，尽管我们尽力使用所有的z-index和位置类型，我无法让我的工具提示显示在搜索窗格上方。

我创建了一个简单的jsfiddle，其中一个工具提示显示在搜索窗格后面。为了简便起见，我刚刚创建了一个红色的div文本 “工具提示” 来表示我的bootrap提示：

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

Answer 1

您需要在y之前初始化jQuery中的Tooltip插件您可以同时使用它，下面是一个有用的教程：

How to use Bootstrap Tooltip

引导的工具提示是不是默认的HTML一个不同，需要使用Javascript/jQuery的