可滚动内容中的引导工具提示

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工具提示将被“切碎”（由于overflow）。

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

Answer 1

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