Currently seeking new career opportunities in web development, particularly with Laravel, Hire Me

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>

 

Laravel Modules Your Logo Your Logo Your Logo

Become a sponsor

Help support the blog so that I can continue creating new content!

Sponsor

My Latest Book

Modular Laravel Book - Laravel: The Modular way

Learn how to build modular applications with Laravel Find out more

Subscribe to my newsletter

Subscribe and get my books and product announcements.

Learn Laravel with Laracasts

Faster Laravel Hosting

© 2006 - 2024 DC Blog. All code MIT license. All rights reserved.