HTML and CSS Reference
In-Depth Information
Instead of using an ID, the styles use an attribute selector to identify the link. As in the previous example,
the containing block is created by setting the position of the outer element—in this case, the link—to relative .
Then the position of the nested element (the <span> ) is set to absolute , and it's hidden offscreen by specifying
a high negative left offset. It's also necessary to set text-decoration to none to remove the underline from
the <span> , which is still part of the link. Finally, the offsets are reset when the user hovers over the link.
Although a[href$= ""]:hover span looks complicated, it's basically the descendant selec-
tor a:hover span . The [href$= ""] qualifies the a type selector to identify a specific link using the
end of its href attribute.
Although the text in the tooltip is part of the link, it's not clickable because the tooltip disappears as soon
as you move off the link in the main text. However, because it's a link, you can make it accessible to keyboard
navigation by adding the :focus pseudo-class to the selector that displays the tooltip like this:
a[href$=""]:hover span ,
a[href$=""]:focus span {
left: 20px;
top: -160px;
When the user tabs through the links in the page, the tooltip pops up as soon as the associated link gets
focus. It disappears as soon as the user tabs away from the link.
The preceding example works in all browsers except iE 6. in iE 7, the tooltip appears on hover, but not
when you tab to the link because iE 7 doesn't support the :focus pseudo-class.
Problems with Touch Screens
The styled tooltips in the preceding two examples work well on desktop computers, but are less satisfactory
on touch screen devices. If you use the :hover pseudo-class on an element, smartphones and tablets usually
display the appropriate styles when the element is tapped. So, tapping the image of the casino causes the tooltip
to appear over the image. But the tooltip doesn't go away unless you tap another element that uses the :hover
pseudo-class. In some circumstances, this might not matter. It could even be treated as a feature in a children's
site, where the user is encouraged to reveal hidden information. However, in most cases, it's likely to be annoying.
The link tooltip presents a slightly different problem. On Android, the link works as normal, and the tooltip is
never displayed. But on iOS, tapping the link once displays the tooltip. You need to tap it twice to go to the link's
Because touch devices are increasingly used to access websites, you need to take such problems into
consideration. There are several approaches you can adopt:
:hover and :focus pseudo-classes to display styled tooltips.
Don't use the
Use media queries (see Chapter
17) to hide the tooltip or display the information in a
different way on small screens.
Use JavaScript to dismiss the tooltips using touch events.
Search WWH ::

Custom Search