Menu
When I have an element associated with a Twitter Bootstrap Tooltip and the Tooltip will overlap outside the browser window, it tries to realign within the window but it misaligns vertically (i.e. the top alignment of the tooltip is now centred rather than above the target element)
Has anyone encountered this before and if so, what was the work around/fix/update?
486
In Bootstrap 4, you can position the tooltip in various directions (left, right, top, bottom). The positioning of the tooltip is set by using the third-party library (Popper. js) before bootstrap. js in order for the tooltip to work.
The Tooltip Alignment can be used to align the tooltip to the left or right using the different alignment classes. Primer CSS Tooltip Alignment Class: tooltipped-align-right-1: This class is used on the tooltipped container to align the tooltip to the right of the element with an arrow more intended.
Positioning Tooltips By default, the tooltip will appear on top of the element.
The tooltip text is placed inside an inline element (like <span>) with class="tooltiptext" . CSS: The tooltip class use position:relative , which is needed to position the tooltip text ( position:absolute ). Note: See examples below on how to position the tooltip. The tooltiptext class holds the actual tooltip text.
Yes, others have encountered this before. For example, Issue #4125: Bad position of tooltip or Issue #3556: Tooltips near edge of window don't activate properly.
In the former it is suggested to either disable text wrapping or set a fixed height.
In the latter it is suggested (rather jestingly - but nevertheless potentially useful) to set a different positioning on tooltips you know are going to be near the window edge. E.g., placement: 'left' or placement: 'right'.
At this point there doesn't seem to be any impetus toward getting this handled in the repo.
97
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
