mini-screen popups on mouse over

Question

I can't figure out how to phrase this question to be honest. :/

But I'm trying to get the following effect:

http://zack.scudstorm.com/example.png

I was wondering if anyone here could help me try to figure out how to accomplish this effect as seen in the image? :/

The effect, as seen in the image, is that when I hover over an image, or whatever I bind "onmouseover" event to, a "popup" is displayed showing text and other information that I may need to display.

Thanks in advance!
-Zack

P.S. Sorry for the example being from WoW; it's the only thing I could think of when trying to describe this effect.

Answer 1

Heres some pseudo code to get you started:

bind mouseover event to link - in jquery: $('a.popup').mouseover(function(){ /* code here */ });

in the event find position of mouse
create (or use already created) div to hold your information
place div into the body element directly so you can absolutely position it
use the mouse position you found earlier to position your div at the mouse (or relative to the mouse)

bind mouse out event to link
in the event hide the absolutely positioned info div

apply nice styles in the stylesheet :)

Thats all there is to it. Its not that difficult - if you're using jquery all of this stuff is in the docs.

Hope this helps

Answer 2

Check out any of the many jQuery tooltip plugins.

qTip seems to be pretty good.

Answer 3

MooTools has some nice mouse tips too:

MooTools docs: Tips Class

Demo/Tutorial