HTML | CSS | Tutorials

David Carr

Create Pure CSS Tooltips

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

First the 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>

 

Domains are often purchased from multiple providers, keeping track of where a domain is and its DNS settings can be tricky. Domain Mapper solves this by listing all your domains in one place. View your DNS settings and receive reminders to renew your domains. Try it today.

Support my work by donating with PayPal.

Subscribe to my newsletter

Subscribe and get my books and product announcements.

© 2009 - 2021 DC Blog. All code MIT license. All rights reserved.