make tooltips using css

Save 15% On Pluralsight - Annual Subscription Only $299

Pluralsight courses
LinkedIn Premium uses PayScale to estimate job salaries

Save 15% On Pluralsight - Annual Subscription Only $299


Premium (Not Free) Video Tutorials

Free Video Tutorials & Free Tools

 

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 with your mouse.

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

this is a link This is a tooltip

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  is hidden, the second line reveals the  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.

Here is a nice article on how to create tooltips using css
 
http://www.communitymx.com/content/article.cfm?cid=4e2c0
 
Tooltips using css 3.0 
 
http://www.nitinh.com/2010/03/sexy-tooltip-using-css3/
 

For example see how css tooltips can look -

http://downloads.sixrevisions.com/css-tooltips/index.html

 

Please give sug

Related posts:

  1. How to make a simple navigation bar In this tutorial . I will show you how you...
  2. Pure css lightbox What is a lightbox ? To put it simple lightbox...
  3. Tip #11 – Two Core Differences Between ASPNET Development Server and IIS 1. Security Context – In ASPNET Development Server, it is...
  4. Tip #22 – Putting the Pieces of .NET Together – Part 8 of 8 – Languages What are the supporting languages for .NET? HTML, CSS, JavaScript,...

Related posts brought to you by Yet Another Related Posts Plugin.

Comments

2 Responses to “make tooltips using css”
  1. Thanks I finally came to a website where the webmaster knows what they're talking about. Do you know how many results are in Google when I search.. too many! It's so irritating having to go through page after page after page, wasting my day away with thousands of owners just copying eachother's articles… bah. Anyway, thanks for the information anyway, much obliged.

Speak Your Mind

Tell us what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!

Powered by WP Hashcash

This blog uses the cross-linker plugin developed by Web-Developers.Net