Can some one give me an example of how to make a tooltip using BootStrap5.x and it's use of Popper JS, where the tooltip simply stays with the associated element? Regardless of whether or not the page overflows/scroll bars appear?
I've tried working with boundaries and a variety of things. However I'm clearly not doing any of it right.
The issue is that the ToolTips constantly float away from their associated element, like a span, a button, or a label. The floating away occurs when a scroll bar appears on the screen. The tool tip just disconnects and floats away from the associated element at about the same distance as the size of the scroll bar.
I've seen a lot of issues like this throughout StackOverflow and other sites, but I'm really not doing something right to get into the config of the tooltips via JavaScript and make any changes that have an impact.
CSS
.custom-small-tooltip {
font-size: x-small;
max-width: 150px;
}
HTML
<div>
<div>
<label data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="custom-small-tooltip" data-bs-trigger="hover" data-bs-title="Sample Title">SampleLabel Display Value</label>
</div>
</div>
External JS Bootstrap ToolTip Initializer
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
A sample of trying to resolve this..
var myButtonTarget = document.getElementById('mybuttonname')
var tooltip = new bootstrap.Tooltip(myButtonTarget, {
boundary: document.body
//placement: 'left' //setting this does nothing to the tooltip's behavior.
});
I've placed this right after the bootstrap tooltip initializer code in the same js file and I can't seem to get anything to change with my button's tooltip when I set anything in there.
So I nearly threw away Bootstrap and Popper JS over this issue...
However... X-D
After about a week of struggling to get syntax and everything else correct just to be able to tweak popper behavior, the solution I found is as follows.
In my main Javascript external library for this site, I initialize the Bootstrap tooltips as is recommended by their documentation.
Then tag my elements with the elements related to the tooltip functionality.
Example:
The CSS for the span is contains a key point, in that no "position" is provided in the class definition.
CSS
This is all contained in a form with a few layers of divs.
The container elements don't actually matter other than eventually the page, when sized down small enough makes scroll bars available on the right and left of the browser window. i.e. Overflow behavior kicks in as the min-width for the Body and Page cause the scroll bars to appear and the content of the page causes the page height to extend off screen.
Key Points: Scroll Bars display on page. Follow the documented practices for setting up tooltips by Bootstrap. mywrapper-or-whatever-class CSS class does not have a position attribute.
The solution is to set the container of the tooltip to the wrappers element while also setting the popperConfig strategy to "absolute". While also setting the wrapper to have a position of "relative". However the relative positioning only impacts tooltips that pop up on the left or right side of their associated element.
Sites Javascript Library to initialize all tooltips.
CSS has the Position attribute updated to state relative (for left and right showing tooltips).
CSS
The final behavior is that you will now have tooltips that stay attached to their element even if the element scrolls off screen.