Create Pure CSS Tooltips

David Carr

CSS Tutorials HTML

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>

 

Copyright © 2006 - 2024 DC Blog - All rights reserved.