Recommend on Google

Follow @YOU
Follow me!
From twitter
- today is mainly going to consist of payment gateways configuration oh joy 9 hrs ago
- another wordpress theme done on to tweak another #gettingmypresson 1 day ago
- just finished reading an excellent #eBook from @amberweinberg on #Wordpress themes as a #cms well worth a read http://t.co/jZxBw9Ki 1 day ago
- More updates...
Posting tweet...
Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.
Join 1 other subscriber

04May2011

Author

Create Pure CSS Tooltips

Through this code, you can have your own tooltips using just CSS!!

First thre styling that goes inside your CSS file

a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/
a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;}
a.tooltip:hover span{display:inline; position:absolute; background:#ffffff; border:1px solid #cccccc; color:#6c6c6c;}

To use the tooltip simple give any link a class of tooltip and place ant text you want in a tooltip inside span tags

<a class="tooltip" href="#">Tooltiped link<span>This will appear in a tooltip</span></a>

Author

Dave

About the Author

Dave has written 72 articles on Dave is my name.

My name is David Carr I'm a PHP web developer based in Hull it is my passion to design and develop clean, accessible and usable websites using PHP and other web technologies, I'm an avid Twitter user why not follow me? https://twitter.com/daveismynamecom

Visit this author's website · View more posts by Dave