PreviousPauseNext
Latest Free WordPress Themes | More Free Themes
ClearPress WordPress Theme
ClearPress

Colorful
Unique Layout
Pull-Down Sidebars
Gravatar Ready
Widgetized

Demo
Download
Latest Free WordPress Themes | More Free Themes
Digital Statement WordPress Theme
Digital Statement

Post Slideshow
Content Tabs
Widgetized
Twitter Ready
Flickr Ready

Demo
Download
Latest Free WordPress Themes | More Free Themes
Angel WordPress Theme
Angel

Light Colored
Valid CSS/XHTML
Widgetized
Unique Layout
Styled Comments
DOM Tabs

Demo
Download
Latest Free WordPress Themes | More Free Themes
Portfolio WordPress Theme
Portfolio Press

Dark Colored
Valid CSS/XHTML
Widgetized
Unique Layout
Styled Comments
Neat Code

Demo
Download
Latest Free WordPress Themes | More Free Themes
DailyPress WordPress Theme
DailyPress

Minimalistic Theme
125x125 Ad Space
Widgets Ready
Social Tagging
Tabbed Sidebar
XHTML Compliant

Demo
Download
Latest Free WordPress Themes | More Free Themes
Firebug WordPress Theme
Firebug

Colorful Theme
125x125 Ad Space
Widgets Ready
Social Tagging
Gravatar Ready
XHTML Compliant

Demo
Download
Latest Free WordPress Themes | More Free Themes
Gridblog WordPress Theme
Gridblog

Minimalistic Design
WP Gallery Ready
Gravatar Ready
Grid Based
Widget Ready
XHTML Compliant

Demo
Download
Latest Free WordPress Themes | More Free Themes
Blue Weed WordPress Theme
Blue Weed

WP 2.5 Gallery Compatible
Adsense Ready
Gravatar Ready
3-Columns
Widget Ready
Logo PSD

Demo
Download
Latest Free WordPress Themes | More Free Themes
AdsPress WordPress Theme
AdsPress

WP 2.5 Gallery Compatible
Adsense Ready
Gravatar Ready
2-Columns
Widget-Ready
Logo PSD

Demo
Download
Latest Free WordPress Themes | More Free Themes
Statement WordPress Theme
Statement

WP 2.5 Gallery Compatible
Quick Tabs
100% Width
3-Columns
Widget-Ready
Logo PSD

Demo
Download

Pure CSS Tooltips

Written by Jai on September 1, 2008 – 2:49 pm - 7,931 views

Today I’ll teach you how top create tooltips purely using Cascading Style Sheets(CSS). Tooltips are basically little blocks of information that are used to inform users about certain attributes of your website elements. This is a tooltip example!Click on this link to see how a tooltip looks like.

Most tooltips are created with the help of javascript or some other programming languages. This can be cumbersome because not everyone wants to learn Javascript. But CSS tooltips are easy to create and can be loaded quickly without any delay.

Here is what you have to do:-

1. Make a blank HTML file and paste the following text in the BODY part :-

<a href="#" class="tooltip"><span>This is a pure CSS tooltip!</span>Tooltip 1</a>

This is the HTML part where we create a hyperlink with the text Tooltip1. In the next step, we are going to hide the text within the span tags which will serve as the tooltip text.

2. Now post this CSS information in your HEAD part of the HTML file :-

.tooltip { position:relative; z-index:24; }
.tooltip span { display:none;}
.tooltip:hover {z-index:25;}
.tooltip:hover span {
display:block;
position:absolute;
width:120px;
top:25px;
left:20px;
background-color:#FCFBDC;
border:1px solid #333333;
padding:5px;
font-size:11px;
color:#333333;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

If you look at the above code carefully, we have given the property display:none to the span tag inside the hyperlink. This will make the text inside the span tag invisible. Now when you hover your mouse, we make it appear again by giving the property display:block to the span tag on hover. The positioning of the .tooltip span class is relative because we will place the tooltip text relative to the hyperlink area and make the span tag absolute by defining its fixed position. The z-index is used so that tooltips are in the front of the hyperlink and do not overlap. The more the value of z-index, the farther in the front goes the element.

These tooltips can also be integrated into a wordpress theme easily. Just copy the CSS into your style.css file and when creating your posts, just take help of the HTML code and create your own tooltips. Rest is all styling which can be altered according to your own choice. You may also use images inside the tooltip boxes.

So, just learn this trick and you will be making nifty CSS tooltips in no time. And yes, don’t forget to leave a comment!

Download an example file

If you enjoyed this post, make sure you subscribe to my RSS feed!


40 Responses to “Pure CSS Tooltips”

  1. Good Tips.


    Reply to this comment

  2. thanks jai, awesome tips as always!


    Reply to this comment

  3. Ahhh.. a CSS tooltip, I’ve always thought of using javascript instead. Good point there :)


    Reply to this comment

  4. Let me add this to my CSS


    Reply to this comment

  5. Adding it right now! Great tip ;)


    Reply to this comment

  6. Hmmm….nice


    Reply to this comment

  7. Thanks!Learning…


    Reply to this comment

  8. I am now design a new theme for my blog’s birthday and I may consider adding this to my theme.

    Thinks Jai!


    Reply to this comment

  9. Nice and easy :)


    Reply to this comment

  10. Thanks. That’s really useful. Is there a way to make this a plugin?


    Reply to this comment

  11. Very cool tips here!


    Reply to this comment

  12. Cool!!!


    Reply to this comment

  13. I used to think that these things were done with JavaScript. Now I know CSS can do it!

    Thanks alot!


    Reply to this comment

  14. Risorsa davvero carina.. Thanks a lot!


    Reply to this comment

  15. great (tool)tip! thanks.


    Reply to this comment

  16. I wonder how they look like in Chrome browser?


    Reply to this comment

  17. cool. will try this for my tab menu.


    Reply to this comment

  18. it is work, let me post about this trick on my blog.

    thanks jai!


    Reply to this comment

  19. it good Thank!


    Reply to this comment

  20. How about a tooltip without CSS or JS? Try this on Chrome:

    Trigger a tooltip

    Awesomeness!


    Reply to this comment

  21. <tooltip title=”This is a tooltip”>Trigger a tooltip</tooltip>


    Reply to this comment

  22. Hey,

    Thank you! A Good tip!

    Regards,
    Jack


    Reply to this comment

  23. Thank you a good tip!


    Reply to this comment

  24. TY! Just what I was after.


    Reply to this comment

  25. Thanks for your nice post ^^


    Reply to this comment

  26. I do like this especially since it uses CSS and not Js.. but my I ask why you have not used it throughout this whole blog?


    Reply to this comment

  27. Thanks ! Good tip & Cool…


    Reply to this comment

  28. Thanks :)


    Reply to this comment

  29. I tried running the downloaded file but the tooltip is not showing up. Is there any kind of a restriction on the XP machines with SP2 or SP3?


    Reply to this comment

  30. I really like this useful tip, thank you!


    Reply to this comment

  31. It cool thank you for Pure CSS Tooltips


    Reply to this comment

  32. Cool


    Reply to this comment

  33. It cool thank you for Pure CSS Tooltips


    Reply to this comment

  34. one question i want tooltip in fixed position in all resolution. is it possible?


    Reply to this comment

  35. Hi there,

    Thanks for the tip! Works great in Firefox and IE7, but the tooltip is not showing in IE6. Any help would be appreciated?!


    Reply to this comment

  36. Nice work! Very thankful!


    Reply to this comment

  37. Good one!


    Reply to this comment

  1. 3 Trackback(s)

  2. Tooltips | Karen Arnold Design, LLC
  3. Design Inspirations for September 12th | isuckatdesign.com
  4. ???? ????? l ???? ??????? l ????? » ????? ???? » ?????? ???? ???? Tooltip ??

Post a Comment