HTML and CSS Reference
In-Depth Information
background-color: #FFF;
border-radius: 15px;
}
#casino:hover p {
left: 140px;
}
The
casino<div>
is relatively positioned with no offsets, leaving the
<div>
in its normal position in the
document flow, while creating a containing block for the paragraph, which is absolutely positioned. The
top
offset of the paragraph is set to
60px
, which moves it down from the top of the image by the same amount.
However, the
left
offset is set to a very high negative value, which moves it offscreen, but leaves the content
accessible to screen readers for the blind. When the user hovers over the
casino<div>
,
#casino:hover p
resets
the paragraph's
left
offset to
140px
IE 6 and IE 7 support the
:hover
pseudo-class only on links. If you need to support IE 6 and IE 7, wrap the
image in a dummy link and add an empty
title
attribute to the
<img>
tag like this (the code is in tooltips_ie6-7.
html):
<a href="#">
<img src="images/casino.jpg" alt="Casino at Monte Carlo" width="266"
height="400" class="shadow"
title=""></a>
The empty
title
attribute is needed to prevent older versions of IE incorrectly displaying the
alt
text as an
unstyled tooltip. Also, you need to add the following styles to prevent a blue border surrounding the image, and
to stop the cursor from turning into a hand:
a img {
border: none;
}
#casino a:hover {
cursor: default;
}
■
Although screen readers should be able to access the tooltip paragraph, it's not accessible to anyone
using the keyboard to navigate around a site. Don't use this technique for essential information.
Caution
Adding a Styled Tooltip to a Link
The principle behind adding a styled tooltip to a link is exactly the same as for an image, but the text of the tooltip
needs to be nested inside the link. The second paragraph in tooltips.html contains a link with a nested
<span>
like this:
<a href="
http://www.formula1.com/">Formula
1 Grand Prix
<span>Most F1 races are held on
specially constructed circuits. But Monaco is one of a handful of F1 street circuits that
also include Valencia, Melbourne, and Singapore.</span>
</a>
The styles for the link and tooltip look like this:
a[href$="formula1.com/"] {
position: relative;
}
