Black Friday sale is now on! 50% off Laravel: The Modular Way. Learn more

Create Pure CSS Tooltips

David Carr

HTML CSS Tutorials

    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 Book by David Carr

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

    Subscribe to my newsletter

    Subscribe and get my books and product announcements.

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