How to place an element so that it does not follow from the visible screen

Question

I am creating pseudo-hints on a page with a lot of "a" and "span" elements that are associated with these tips. Everything in creating the item is fine, and it displays fine.

However, since this is a page with a lot of data, as you approach the bottom of the visual area, tooltips begin to pass by the bottom edge of the window. My initial attempt to compensate for this with window.innerWidth / innerHeight did not work out too well. I am using jQuery to manipulate the DOM (but not JQuery UI). Given the event itself and the height and width of the tooltip (which I can get with getBoundingClientRect() ), how can I place this element so that the bottom of the tooltip is never below the edge of the window?

Answer 1

Check out the jQuery UI position plugin . It does not require the jQuery UI core and is expected to become a jQuery core plugin.

Additional documentation: http://jqueryui.pbworks.com/Position