Create Pure CSS Tooltips

Create Pure CSS Tooltips

Jan 2, 2011·

1 min read

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;}

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

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