HTML and CSS Reference
EXPLANATION ( CONTINUED )
The init() function is defined to get the ID of a div element. In this example, this
will be the ID for the tooltip.
The showHideTip() function is defined. It takes one parameter, a reference to an
event object. It contains information about the event that caused this function to
If the event was caused by the mouse going over the link, a mouseOver event, then
the tooltip will be made visible.
If the event was caused by the mouse moving away from the link, a mouseOut
event, then the tooltip will be hidden from view.
As soon as the document has finished loading, the onLoad event is triggered, and
the init() function invoked.
This is the link that displays as “At Your Service!”. Rolling the mouse over it will
cause the tooltip to appear.
The onMouseOver event is triggered when the user puts the mouse on the link.
The tooltip will be shown.
When the user moves the mouse away from the link, the tooltip disappears.
The image for the waiter is below the tooltip, because its z-index is 0, whereas the
tooltip's z-index is 1.
The <div> container is used to hold the tooltip text and style defined by the CSS
ID selector called divclass . The output is shown in Figure 14.40.
Figure 14.40 Before the mouse moves over the link (left), and after (right) when tooltip