I need help with positioning two containers, which you can view in this FIDDLE.
Both containers may contain a lot of content, so I have applied overflow: auto to both of them.
This is 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>
The issue I'm facing involves a button within the #right-container that triggers a tooltip on click. The problem arises when there is enough content to generate a scroll bar – the tooltip does not stay aligned with the button while scrolling. Instead, it remains aligned with the #maincontainer. If I set it to be relative to #right-container, it gets cut off due to the overflow.
My goal is to have the tooltip positioned next to the button even when the user scrolls down.