<!-- JavaScript|CSS:Core code library snippet 4. -->
<!-- Custom tooltip using JavaScript with CSS. -->
<!-- Adaption of snippet 2 used on a <division> element,
where positioning of the tooltip is less critical. -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- Code source: http://www.justfigures.co.uk/ -->
<!-- A resource for web developers using XHTML, CSS, JavaScript, PHP -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>View code snippet page</title>
<script language="JavaScript" type="text/javascript">
// function to show tooltip
function showTip(aEvent) {
var toolTip = document.getElementById("tipDiv");
toolTip.style.visibility = "visible";
// position of tooltip relative to cursor
// IE browsers only
toolTip.style.left = aEvent.clientX + 15;
toolTip.style.top = aEvent.clientY + 15;
}
// function to hide tooltip
function hideTip() {
var toolTip = document.getElementById("tipDiv");
toolTip.style.visibility = "hidden";
}
</script>
</head>
<body>
<div id="pageDiv" style="background-color:#FF6633; height:50px; width:500px; cursor:help"
onmouseover="showTip(event)" onmouseout="hideTip()">
<p>Tooltip: try hovering your mouse over this orange rectangle.</p>
</div>
<div id="tipDiv" style="background-color:#FFFF99; padding:5px; position:absolute; visibility:hidden">
<p><span style="font-weight:bold">This is custom tooltip.</span></p>
</div>
</body>
</html>