How to do floating thingy when mouseover?

[ssalim]

For example. There is a link (or text or image). User hovers the mouse over it, and there it appears a small window (not a new window, but floating over the existing window) some predefined text.

Site example: tvguide.com (hover to a movie name on a channel, and you see the movie description etc).

How do you do that?
Thanks!

[felgall]

Simplest way to display text like that is to add a title attribute to the tag.

eg.

<span title="display this text">mouse over this</span>

it works with all modern browsers (including IE4+) and can be added to any tag that you want the text attached to (eg. <a> <img> <h2>)

If you want something fancier than plain text then you need a JavaScript Tooltip script eg. http://javascript.about.com/library/bltip1.htm

[ssalim]

Ok that helped. Thanks!

Edit:
Now what if I want to add a 1-second delay before displaying the extended tooltip? I tried setTimeOut but it didn't work.

Thanks.

[felgall]

onmouseover="setTimeout('popUp('+event+',\'+t1+'\')',1000)"

[ssalim]

Something's not right... it did not work.

[felgall]

Slight typo, try this:

onmouseover="setTimeout('popUp('+event+',\'t1\')',1000)"