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>
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;
Search WWH ::

Custom Search