CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Zubzob
Zubzob

Reputation: 2743

Bootstrap tooltip within scrollable content

I have two containers, as displayed in this FIDDLE.

Both have content that can become quite lengthy, thus I need to use overflow: auto on both containers.

The HTML structure:

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

I have a button within the #right-container that creates a tooltip on click, displayed right next to it. The problem is that, when I have lengthy content (that determines scroll bar to appear), the tooltip won't be placed near the button (on scroll). It will remain relative to the #maincontainer. If I make it relative to the #right-container the tooltip will be 'chopped' (due to overflow).

What I'm seeking is to have the tooltip aligned next to the button when the user scrolls down that area.

Upvotes: 5

Views: 5427

Answers (1)

demonofthemist
demonofthemist

Reputation: 4199

If you are using Bootstrap tooltip then add class 'bootstrap-demo' to parent div of button & make sure you are NOT passing container:'body' parameter when initializing tooltip.

Upvotes: 1

Related Questions