Tooltips with CSS

In: Web development

22 Jan 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:

body {
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.

10 Responses to Tooltips with CSS

Avatar

teser

February 1st, 2004 at 6am

Merci, c’est vraiment super comme truc !
À force de bidouiller IE avec plein de htc, on va finir par le rendre compatible ;-)

Avatar

Brian A. Wilt

March 18th, 2004 at 4am

Hey–there’s actually a bug in the script that can be viewed here:
Overlapping Tooltips
The solution is to make the z-index of the containing span 5 normally, and then boost it to 10 when you hover on it.
Otherwise, thank you very much!

Avatar

!

April 16th, 2004 at 5pm

er, how do you customize the tooltip rectangle so that it has rounded edges like yours? ^^;

Avatar

Cheah Chu Yeow

April 16th, 2004 at 6pm

You would want to take a look at NiceTitles.

The rounded edges currently only work on Gecko browsers like Mozilla and Firefox, until CSS border-radius is implemented.

Avatar

Full(o)bloG

January 22nd, 2004 at 7pm

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

Avatar

Computer Toaster

January 22nd, 2004 at 8pm

Nicer CSS tooltips
Mark Newhouse’s CSS Help was one of the first CSS tricks I learned. Cheah Chu Yeow takes the idea up a level: The smart part is when printing: the tooltips are “inlined” and bracketed appropriately so that they show up in the normal f…

Avatar

hebig.org/blog

February 1st, 2004 at 9am

Quick Links, February 01
CSS Not to miss: 10 lines of JavaScript to emulate the :hover pseudo-class in IE5+ And it works: Vertical…

Avatar

FreeTacoHere

February 21st, 2004 at 5am

web design: accessibility
Well, yesterday I fianlly uploaded my first version (2.0) of AustinSlam.com .

Avatar

Matt

April 27th, 2006 at 6am

So will the tooltip run off the page if the link is at the far right or bottom of the page?

Avatar

Alys

August 1st, 2006 at 8pm

What is the “/htc/csshover.htc);” thing about, is there a file named csshover.htc that you need to write/upload?