How to position an element so that it does not flow off the visible screen
Posted
by rjray
on Stack Overflow
See other posts from Stack Overflow
or by rjray
Published on 2010-03-17T00:39:17Z
Indexed on
2010/03/17
0:41 UTC
Read the original article
Hit count: 330
JavaScript
|jQuery
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 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?
© Stack Overflow or respective owner