Detecting if a tag wordwraps?

[mmurrell]

I am developing some dhtml code that displays a balloon style help when
a user mouses over words. The balloon help is positioned correctly
until the tag (in this case) word-wraps. Is there any way in JS to
detect and get the correct coordinates? I have tried disabling
word-wrap on the span tag in css, but the offsetTop + offsetHeight
still points to the top of the word (the same place vertically it would
have been positioned before the word wrap.

Thank you for any help.

 

[RobG]

I am developing some dhtml code that displays a balloon style help when
a user mouses over words. The balloon help is positioned correctly
until the tag (in this case) word-wraps. Is there any way in JS to
detect and get the correct coordinates? I have tried disabling
word-wrap on the span tag in css, but the offsetTop + offsetHeight
still points to the top of the word (the same place vertically it would
have been positioned before the word wrap.

To get the co-ordinates of the top left corner of an element, use the
stuff from Quirksmode:

<URL:http://www.quirksmode.org/js/findpos.html>


To find the height and width of the element itself:

<URL:http://www.quirksmode.org/viewport/elementdimensions.html>


You probably need only consider offsetWidth and offsetHeight. Using
the above two references, you should be able to find the position and
size of the element, then position your balloon accordingly.

You might find it useful to put the balloon text in the element's title
attribute so the HTML guys can set it to whatever and your JS just
displays it. It might then also appear as a 'tool tip' where JS is
disabled -or maybe that's a completely useless suggestion.