Tooltips with CSS
January 22, 2004
Pure CSS tooltips by SantaKlauss shows you how to display tooltips using purely CSS. The idea is not unlike Nice Titles, though the execution is very different - Nice Titles uses the DOM to extract the nicetitles, the tooltips use only CSS.
The smart part is when printing: the tooltips are “inlined” and bracketed appropriately so that they show up in the normal flow of the document when printing.
Still, I consider the execution to be semantically incorrect since the tooltip requires the anchor tag <a> to work - the text that is “tooltipped” is not an anchor. A better way would have been to use a standard <span> tag. Of course, this then breaks in IE because IE only supports the :hover pseudo-class on the <a> tag. Thanks to whatever:hover, however, this can easily be fixed. Also, there seems to be no need for the z-index fix as mentioned (tested on IE/Win 5, 5.5 and 6). The CSS is below:
behavior:url(/htc/csshover.htc);
}
span.info{
position:relative;
background-color:#ecc;
color:#000;
text-decoration:none
}
span.info:hover { background-color:#e96 }
span.info span.tooltip { display: none }
span.info:hover span.tooltip {
display:block;
position:absolute;
top:2em; left:2em; width:15em;
border:1px solid #0cf;
background-color:#cff;
color:#000;
text-align: center
}
Here’s an example.
| Category: 
tooltip con CSS
giusto qualche giorno fa chiedevo a futa se avesse qualche idea di come associare ad un tooltip un particolare CSS, ed ecco che su redemption oggi pubblicano la soluzione ai miei problemi!
ciuaz
Posted by: Full(o)bloG on January 22, 2004 7pm