Pure CSS Tooltips

In fact, there are many Tooltips methods, but most of them are implemented using Javascript.
For example, ikshow.cn, using JavaScript, DHTML Tooltips.
I admit that my Javascript is very watery ...... However, CSS can be simpler and more efficient. The most important thing is to comply with the standards.
We add the position: relative attribute to the class so that the position of the span tag can be followed by the link.
Let's take a look at the specific code:
Run code box
<Br/>
<A class = "tooltips" href = "# tooltips"> This is Tooltips <span> as you can see, these additional instructions are displayed when the mouse passes. </Span> </a>
<Style type = "text/css">
/* Tooltips */
. Tooltips {
Position: relative;/* This is the key */
Z-index: 2;
}
. Tooltips: hover {
Z-index: 3;
Background: none;/* not available in IE */
}
. Tooltips span {
Display: none;
}
. Tooltips: hover span {/* The span label is only displayed in the hover status */
Display: block;
Position: absolute;
Top: 21px;
Left: 9px;
Width: 15em;
Border: 1px solid black;
Background-color: # ccFFFF;
Padding: 3px;
Color: black;
}
</Style>
[Ctrl + A Select All tips: You can modify some code and then press run]
Define z-index to ensure that the pop-up Tooltips layer is at the top.
Use: After defining the preceding class, apply the class to a specific label. The span label in the label will be used as Tooltips. For example:
<A class = "tooltips" href = "# tooltips"> This is Tooltips <span> as you can see, these additional instructions are displayed when the mouse passes. </Span> </a>
The above method is suitable for most existing browsers, such as Firefox and IE.
Because most existing browsers support the use of any label for the hover selector (refer to whatever: hover ). for browsers that only use the tag, all we need to do is add "a" before the class ". The details are as follows:
/* Tooltips */
A. tooltips {
Position: relative;/* This is the key */
Z-index: 2;
}
A. tooltips: hover {
Z-index: 3;
Background: none;/* not available in IE */
}
A. tooltips span {
Display: none;
}
A. tooltips: hover span {/* The span label is displayed only when the hover status is displayed */
Display: block;
Position: absolute;
Top: 9px;
Left: 9px;
Width: 15em;
Border: 1px solid black;
Background-color: # ccFFFF;
Padding: 3px;
Color: black;
}