0

I'm using Bootstrap's Tooltip plugin successfully in my application. Because I need it to be applied to elements which are dynamically added to the DOM I'm initialising it like this:

$("body").tooltip({ selector: "[data-toggle=tooltip]" });

The problem I have is that some of the elements to which the tooltips are added are very tall and go way off the bottom of the screen. The tooltips always seem to be vertically positioned at the halfway point of the height of the triggering elements, which means that for these tall elements the tooltips are often not visible without scrolling way down.

I can't use the placement: "top" option because then tooltips will still not be visible if the user has scrolled down the page so that top of the triggering element is not visible.

What I would like is for the tooltip's vertical position to match that of the mouse cursor at the point the tooltip is triggered.

I thought this would be quite simple but it seems not to be. Attempts to re-position the tooltip in the show.bs.tooltip event haven't worked.

Philip Stratford
  • 4,513
  • 4
  • 45
  • 71
  • I think following link can help you https://stackoverflow.com/questions/13515364/dynamically-position-bootstrap-tooltip-for-dynamically-generated-elements. – Ali Soltani Jan 19 '18 at 17:17
  • 1
    I think I saw that one but it doesn't really answer the question because all it does is return the value for the placement option. I need to actually position the tooltip beyond just the built-in placement option. – Philip Stratford Jan 19 '18 at 22:33

0 Answers0