How can I use Javascript to display an information message next to the mouse pointer?

Question

How can I use Javascript to display the information message next to the mouse pointer when the mouse pointer hovers over a link or button? The information will always be next to the mouse pointer until the mouse moves out of the link/button.

Answer 1

With jQuery, you would use the following methods:

• http://docs.jquery.com/Events/mouseenter#fn
• http://docs.jquery.com/Events/mouseleave#fn
• http://docs.jquery.com/Events/mousemove#fn
• http://docs.jquery.com/UI/API/1.7/Dialog#option-position

Should be relatively clear how to stitch those together.

Answer 2

Yes this is possible. Look at the onmousemove event handling function. It is passed an event object which holds properties called clientX and clientY, which are the mouse coordinates.

Of course, IE does this sort of thing slightly differently and will be a pain for you. A Javascript library glosses over these differences and would be easier, but it's not too hard to do it in plain JS.

Answer 3

Jin, Overlib is exactly what you are looking for, and if you got that idea from another website, chances are, that site was using it. The tip/info is always present when hovering over an enabled element - which is overLib's default behavior. It's also easily customisable to one of the many examples on the home page:

http://www.bosrup.com/web/overlib/