可滚动内容中的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则工具提示将被“切断”（由于overflow ）。

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

Answer 1

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