javascript - 可滚动内容中的 Bootstrap 工具提示

Question

我有两个容器，如 FIDDLE. 中所示

两者都有可能变得很长的内容，因此我需要在两个容器上使用overflow: auto。

HTML 结构:

<div id="maincontainer">
    <div id="left-container" class="go-left overflow-y-auto">
        <div id="left-inner-container">Contents</div>
    </div>
    <div id="right-container" class="go-right overflow-y-auto">
        <div id="right-inner-container">
            <div id="button-wrapper">
                <button type="button" id="tip_button" class="btn primary customized-button">tip</button>
            </div>
        </div>
    </div>
</div>

我在 #right-container 中有一个按钮，它在点击时创建一个工具提示，显示在它旁边。问题是，当我有冗长的内容(确定滚动条出现)时，工具提示不会放置在按钮附近(滚动)。它将保持相对于 #maincontainer。如果我让它相对于 #right-container 工具提示将被“chop ”(由于 溢出)。

我正在寻找的是当用户向下滚动该区域时让工具提示与按钮旁边对齐。

Answer 1

如果您使用的是 Bootstrap 工具提示，则将类 'bootstrap-demo' 添加到按钮的父 div 中，并确保您没有传递 container:'body' 参数初始化工具提示。