Using the library to create a tooltip
This is a very versatile DHTML script that can perform a large number of functions. In this example I will use it to create a simple DHTML tooltip. The script makes it easy to produce these sort of effects, by dealing with all the different DHTML implementations and allowing you to concentrate on the functionality instead of the implementation.
This uses the stuff I mentioned in the DHTML section of the JavaScript tutorial on referencing objects. The visibility of the tooltip is changed and its position is altered when a mousemove event is detected over the document body.
To download the script(s), see the script license, and check details like browser compatibility, use the links on the navigation panel at the top of this page.
Demonstration
Hang your mouse over
here to get a tooltip.
The code
This requires my generic DHTML do-everything library which provides several functions, all of which are prefixed with 'MWJ_'.
<a href="#" onmouseover="
//NS4 does not detect mousemoves over links so to be nice to it, I
//tell the document to detect mousemoves and move the tooltip when it does *
MWJ_monitorMouse( function () { MWJ_changePosition( 'mydiv', 15 + MWJ_getMouse[0], 15 + MWJ_getMouse[1], true ); } );
//get the current mouse coordinates from the mouseover
var oMC = MWJ_getMouseCoords(arguments[0]);
//put the tooltip 15px lower and 15px to the right of the mouse
MWJ_changePosition( 'mydiv', 15 + oMC[0], 15 + oMC[1], true );
//make the tooltip visible
MWJ_changeVisibility( 'mydiv', true );
" onmouseout="
//hide the tooltip
MWJ_changeVisibility( 'mydiv', false );
//stop detecting mouse movements
document.onmousemove = null;
if( document.releaseEvents ) { document.releaseEvents( Event.MOUSEMOVE ); }
">* NOTE: old Gecko browsers may be a little jumpy here because they do not like to move elements directly when triggered by mousemove events. This is only intended to be an example; for real use, it may be useful to rewrite the function passed to MWJ_monitorMouse so that it moves the tooltip after a 1ms timeout.