redemption in a blog
Rails, Firefox, Anime, Mac
Tooltips with CSS
In: Web development
22 Jan 2004Pure 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.
Categories
Archives
- February 2010
- January 2010
- November 2009
- September 2009
- July 2009
- June 2009
- March 2009
- November 2008
- September 2008
- August 2008
- June 2008
- May 2008
- April 2008
- March 2008
- February 2008
- January 2008
- December 2007
- November 2007
- October 2007
- September 2007
- August 2007
- July 2007
- June 2007
- May 2007
- April 2007
- March 2007
- February 2007
- January 2007
- December 2006
- November 2006
- October 2006
- September 2006
- August 2006
- July 2006
- April 2006
- March 2006
- February 2006
- January 2006
- December 2005
- July 2005
- April 2005
- March 2005
- February 2005
- January 2005
- December 2004
- November 2004
- October 2004
- September 2004
- August 2004
- July 2004
- June 2004
- May 2004
- April 2004
- March 2004
- February 2004
- January 2004
- December 2003
- November 2003
- October 2003
- September 2003
- August 2003
- July 2003
- June 2003
- May 2003
10 Responses to Tooltips with CSS
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…
FreeTacoHere
February 21st, 2004 at 5am
web design: accessibility
Well, yesterday I fianlly uploaded my first version (2.0) of AustinSlam.com .
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…
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
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!
!
April 16th, 2004 at 5pm
er, how do you customize the tooltip rectangle so that it has rounded edges like yours? ^^;
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.
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 ;-)
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?
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?