HTML and CSS Reference
In-Depth Information
Figure 11-14.
A styled tooltip is displayed when hovering over the image
The
<div>
that contains the image and caption has been given an ID, and the paragraph for the tooltip is
nested inside the
<div>
like this:
<div class="floatleft"
id="casino"
><img src="images/casino.jpg" alt="Casino at Monte Carlo"
width="266" height="400" class="shadow">
<p>The casino also houses a theater suitable for opera and ballet.</p>
<div class="figcaption">Monte Carlo casino</div>
</div>
The styles for the
<div>
and tooltip look like this:
#casino {
position: relative;
}
#casino p {
position: absolute;
top: 60px;
left: -9999px;
font-size: 14px;
width: 100px;
padding: 10px;