无法在滚动窗格中显示Bootstrap Tooltip以显示上面的div [英] Unable to get Bootstrap Tooltip to display above div when inside scroll pane

问题描述

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

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

我已经创建一个简单的jsfiddle，其中一个工具提示显示在搜索窗格后面。为了简单起见，我只是用文本tooltip创建了一个红色div来表示我的bootrap工具提示：

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

$ b 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>搜索结果窗格：< / p> 
< div class =tooltip1>< p> TOOLTIP< / p>< / div> 
< ul id =list>< / ul> 
< / div> 
< / div> 
< / div> 
  

CSS：

  .sidebar {
 position：fixed; 
 top：0; 
 bottom：0; 
剩下：0; 
 display：block; 
 overflow-x：hidden; 
 overflow-y：auto; 
 border：1px纯灰色; 
} 
 
 .tooltip1 {
 position：absolute; 
 top：50px; 
 left：-5px; 
 z-index：1000; 
背景颜色：红色; 
 
  

解决方案

您需要初始化jQuery中的Tooltip插件，然后才能使用它，下面是一个有用的教程：

如何使用Bootstrap Tooltip

Bootstrap的Tooltip与默认的HTML不同，需要使用javascript / jQuery

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

解决方案

You'll need to initialize the Tooltip plugin in jQuery before you can use it, below is a helpful tutorial:

How to use Bootstrap Tooltip

Bootstrap's Tooltip is different than the default HTML one and requires the use of javascript/jQuery

这篇关于无法在滚动窗格中显示Bootstrap Tooltip以显示上面的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！