How to position an element so that it does not flow off the visible screen

I am creating pseudo-tooltips on a page that has a lot of "a" and "span" elements that have these tips associated with them. Everything in the creation of the element is fine, and it displays fine.

However, since this is a page with a lot of data, as you get towards the bottom of the visual开发者_JS百科 area the tooltips start to flow past the bottom edge of the window. My initial attempt to compensate for this with window.innerWidth/innerHeight didn't come out too well. I'm using jQuery for DOM manipulation (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 position this element so that the bottom of the tooltip is never below the edge of the window?

Check out the jQuery UI position plugin. It doesn't require the jQuery UI core and is slated to become a jQuery core plugin.

More Documentation: http://jqueryui.pbworks.com/Position