user experience design and consulting

Opening mouseover help

This demo displays content in a hidden DIV when the user moves the mouse over a link.

The content that appears could contain anything, including formatted text, images, and links. The mouse over area does not have to be formatted as a link--it could be "normal text" or an image.

How to see the demo

Move your mouse here


function showHelp(helpid) {
document.getElementById(helpid).style.visibility = "visible";

function hideHelp(helpid) {
document.getElementById(helpid).style.visibility = "hidden";

<a href="#" onMouseOver="showHelp('fieldhelp')" onMouseOut="hideHelp('fieldhelp')">Move your mouse here</a>

How it works

This script uses the onMouseOver and onMouseOut events to show and hide a hidden DIV (the help content). Multiple links can use the same scripts because the ID of the hidden DIV (in this example, "fieldhelp") is sent to the scripts as a variable.

Browser compatibility

This script should work in any browser.


Just send us an email.