Create Pure CSS Tooltips

David Carr

1 min read - 2nd Jan, 2011

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>


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

 

0 comments
Add a comment

Copyright © 2024 DC Blog - All rights reserved.