Pro HTML5 and CSS3 Design Patterns

(avery) #1

CHAPTER 20 ■ ALERTS


Tooltip Alert


HTML


<h1>Tooltip Alert</h1>

<p>A tooltip alert slips right into the flow of text. It is usually signalled
by a small image<img class="imagetip" src="alert.gif"
title="Tooltip text goes here."
alt="Tooltip text goes here." />

or some type of text decoration, such as a
<em class="texttip" title="Tooltip text goes here.">
dotted underline<img src="invisible.gif" alt="Tooltip text goes here." />.</em>
</p>

CSS


*.tooltip-image { cursor:help; margin-left:3px; }

*.tooltip { cursor:help; border-bottom:1px dotted;
font-style:normal; font-size:0.8em; }
Free download pdf