Main Page

Custom tooltips

Custom tooltips
Another interesting use of the
object is to create custom tooltips, which are those helpful yellow
boxes that appear when you move a mouse over an image button. By using the
attribute, HTML
elements can provide plain text tooltips, such as this:
<a href=”” title=”Wrox Site”>Wrox</a>
However, these plain text tooltips may not be enough. Suppose you want to create a tooltip with bold or
italic text, or maybe even an image, you can do so by creating a hidden
that is displayed only
when the mouse moves over its designated target. This is essentially the same as the rollover code, with
one extra step: moving the
into a position close to the mouse. To correctly position the
you can make use of the
properties of the
object. Note that because these
properties are available in all instances of the
object, you don’t need to use the
created earlier in the book:
<title>Style Example</title>
<script type=”text/javascript”>
function showTip(oEvent) {
var oDiv = document.getElementById(“divTip1”); = “visible”; = oEvent.clientX + 5; = oEvent.clientY + 5;
function hideTip(oEvent) {
var oDiv = document.getElementById(“divTip1”); = “hidden”;
<p>Move your mouse over the red square.</p>
<div id=”div1”
style=”background-color: red; height: 50px; width: 50px”
onmouseover=”showTip(event)” onmouseout=”hideTip(event)”></div>
<div id=”divTip1”
style=”background-color: yellow; position: absolute; visibility:
hidden; padding: 5px”>
<span style=”font-weight: bold”>Custom Tooltip</span><br />
More details can go here.
The DOM style methods are not supported by Internet Explorer. For this reason, it is
best to use properties of the
object to get and set CSS properties.
Advanced DOM Techniques
13_579088 ch10.qxd 3/28/05 11:39 AM Page 307

JavaScript EditorFree JavaScript Editor     Ajax Editor