stormdamage.org - Art, Webdesign and CSS.

« Bug Me Not
Floral Vector Shapes »
Jul
1

Tooltips using CSS only, no Javascript

Posted by Leonie under CSS.

Here’s a nice easy method for making link tooltips entirely in CSS, without any Javascript. For a demonstration of what I mean, hover over this link This is a tooltip. with your mouse.

To do this, you will need to create a class for the links which require tooltips, and a <span> within that link to include the tooltip text:

<a class=”tooltiplink” href=”#”>this is a link<span> This is a tooltip</span></a>

I have put some spaces inside the tooltip span on both sides, so those with CSS turned off don’t view the link and tooltip text as being scrunched together.

Then add the following styling:

a.tooltiplink span {display:none; }
a.tooltiplink:hover span { display:inline; position:absolute; padding:5px; color:#0c0; background-color:#eee; border:1px solid #000; text-decoration:none; }

The first line ensures the tooltip <span> is hidden, the second line reveals the <span> when the link is hovered over. It does this by switching the ‘display’ from ‘none’ to ‘inline’. The second line also adds some visual styling such as padding, text colour, background colour, and a border. Finally it adds ‘text-decoration:none’, so it does not inherit the underline from the link.

However, There is still a little tweak we need to apply to this CSS, as IE 6 has problems rendering the tooltips. This is easily fixed by adding a font-size to the hover:

a.tooltiplink:hover { font-size:100%; } /* IE6 fix */

I am not sure why this works, as setting the font-size shouldn’t make any difference at all. Suffice to say IE 6 is full of unique little quirks!

So there you have it, tooltips with no Javascript involved.

EDIT: You can see some creative uses for trick this here – CSS tooltips and images.

Tags: ,

You can follow any responses to this entry through the Comments RSS Feed.
You can leave a response, or trackback from your own site.

Comments:

moore creative search engine marketing Says:

This is an interesting concept that could affect search engine results… imagine having, with each of the keyword important links on your page, having the ability to also have a short phrase or paragraph there that’s also filled with more valid, relevant keywords. To a spider, it would show that the whole link was a long phrase with all of those value adding words, but to a user it would still be a nice visual presentation of a short link!

Posted on July 2nd, 2008 at 11:35 pm
paresh Says:

nice useful tips.

Posted on July 3rd, 2008 at 12:10 pm
Andy Gongea Says:

Nice trick. Kudos for sharing with us this technique

Posted on July 3rd, 2008 at 7:48 pm
Olmec Sinclair Says:

This could cause some issues for people with screen readers since the tip is inside the link…? Also I noticed that in print preview mode (under Firefox) the output is not formatted very well.

Posted on July 4th, 2008 at 12:29 am
Brian Says:

Very clever. I will definitely use this!

Posted on July 4th, 2008 at 6:53 am
Steve Says:

Nice site Leonie and thanks for the tip, look forward to reading much more from you.

Posted on July 4th, 2008 at 9:52 am
Kirk Wilson Says:

My page with your tooltip via CSS looks good in Firefox 2.0.0.15.

Same page displays the tooltip as part of the page in Safari 3.1.1., displays the tooltip off the page horizontally in Opera 9.51 and IE 7.0.5730.11 (IE also displays a background color on the first line of the tooltip.)

If you like, I can send screen shots of Firefox, Safari, Opera and IE versions of the page with your CSS tooltip.

Don’t know if you expected the tooltip to display properly in browsers other than Firefox.

Posted on July 6th, 2008 at 8:17 am
Jonathan Says:

You know, the even cleaner (and more semantically correct) solution would be just to use the ‘title’ attribute of the anchor tag as follows:

<a href=”#” title="This is a tooltip">this is a link</a>

Posted on July 7th, 2008 at 1:40 am
sumit Says:

not a fan but i like it

Posted on July 7th, 2008 at 4:09 pm
Leonie Says:

Thanks for your feedback everyone.

Yes, the HTML ‘title’ tag is a useful one, though it is rather limited as it can’t be styled or even forced onto more than one line. If you’re looking to make small tooltips then it is perfect, but another solution is needed for larger ones.

As for the browser issues – I can’t seem to replicate the problem. Kirk, are you using a Mac by any chance?

Posted on July 7th, 2008 at 4:53 pm
antique Says:

pretty nice hover effect. does this get in the way of the title attribute of the A HREF tag?

Posted on July 8th, 2008 at 2:47 am
Leonie Says:

After emailing Kirk about this, it seems the problem was that he was trying to use <p> tags within the tooltip <span> tag. If anyone else would like to do this too, then all that’s needed is to change the <span> tags to <div> tags. This is because <p> tags are formatting tags. <span> is not a formatting tag, so IE and Safari struggle with the layout. <div> however, is a formatting tag, and so will display the <p> tags properly.

Posted on July 8th, 2008 at 4:27 pm
Vote for this article at blogengage.com Says:

Tooltips using CSS only, no Javascript…

Tutorial on using tooltips without using javascript, ony CSS….

Posted on July 17th, 2008 at 2:47 am
Best Design Resources of July 2008 | CrazyLeaf Design Blog Says:

[...] Tooltips using CSS only, no Javascript [...]

Posted on August 1st, 2008 at 11:45 pm
Gualgege Says:

Thank you

Posted on August 3rd, 2008 at 7:36 pm
Scarf*oo Says:

Nice tip, though I see a problem for people unable to take advantage of css, like blind people, for example. I would still prefer using the title attribute along with some javascript to style the tooltip.

Posted on August 20th, 2008 at 7:33 am
Leonie Says:

Not sure if that’s true really, as without CSS turned on the tooltip will still render along with the rest of the sentence (which admittedly may be a little syncopated). But with Javascript turned off, it won’t render at all.

Posted on August 20th, 2008 at 9:18 am
Scarf*oo Says:

The title will render in most new web browsers anyway, and it will be read exceptionally well by a screen reader, which blind people normaly use.

Posted on August 20th, 2008 at 8:37 pm
Florence Says:

Would it be possible to use this clever technique for images too ?

Posted on October 26th, 2008 at 3:46 pm
Leonie Says:

Most certainly, simply replace the ‘this is a link’ text with the image, to give something like:

<a class=”tooltiplink” href=”#” rel=”nofollow”><img src=”image.gif” /><span> This is a tooltip</span></a>

Posted on October 27th, 2008 at 12:18 pm
Jack Foster Says:

way cool I am going use this tooltip for sure.

Posted on January 19th, 2009 at 5:10 am
John Says:

Cool! What I am looking for is a CSS only tooltip that can be used within the AREA tag of an image map as well. I tried to apply your tooltip, but AREA is quite restricted in attributes.

Posted on April 19th, 2009 at 5:38 am
palpandi Says:

It is greeat work and very easy to use.

Posted on April 27th, 2009 at 10:28 am
foodland Says:

hi cool post….
thanks very useful…..

Posted on April 29th, 2009 at 5:34 pm
pragna Says:

image map with tool tip in javascript code or css code i want that……thanks in advance

Posted on July 29th, 2009 at 12:42 pm
sandrar Says:

Hi! I was surfing and found your blog post… nice! I love your blog. :) Cheers! Sandra. R.

Posted on September 10th, 2009 at 8:39 pm
Michel Says:

It work fine in most of browsers, except in Safari 3 where the “text-decoration:none” of the selector “a.tooltiplink:hover span” is not applied.
Then, all text of the tooltip is underlined.

Posted on December 14th, 2009 at 5:24 pm
meetpd Says:

If for some reason IE6 fix does not work, add a background-color in the first css class like this:

a.tooltiplink:hover { font-size:100%; background-color:#FFFFFF } /* IE6 fix */

Hope this helps.

Posted on March 8th, 2010 at 7:41 am

Leave a reply: