HTML and CSS Reference
In-Depth Information
EXPLANATION
(
CONTINUED
)
6
The
init()
function is defined to get the ID of a
div
element. In this example, this
will be the ID for the tooltip.
7
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
be called.
8
If the event was caused by the mouse going over the link, a
mouseOver
event, then
the tooltip will be made visible.
9
If the event was caused by the mouse moving away from the link, a
mouseOut
event, then the tooltip will be hidden from view.
10
As soon as the document has finished loading, the
onLoad
event is triggered, and
the
init()
function invoked.
11
This is the link that displays as “At Your Service!”. Rolling the mouse over it will
cause the tooltip to appear.
12
The
onMouseOver
event is triggered when the user puts the mouse on the link.
The tooltip will be shown.
13
When the user moves the mouse away from the link, the tooltip disappears.
14
The image for the waiter is below the tooltip, because its
z-index
is 0, whereas the
tooltip's
z-index
is 1.
15
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
appears.
