Generic DHTML do everything library


Skip navigation.

Site search

Site navigation

Details and download

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.


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.

This site was created by Mark "Tarquin" Wilton-Jones.
Don't click this link unless you want to be banned from our site.