WordPress Themes Blog Oh! Blog

Share on Facebook0Tweet about this on TwitterShare on Google+0Pin on Pinterest0Share on LinkedIn0

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 :-

This is a pure CSS tooltip!Tooltip 1

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

Share on Facebook0Tweet about this on TwitterShare on Google+0Pin on Pinterest0Share on LinkedIn0
  1. ??????? left a comment on July 15, 2016 at 7:07 am |

    ???????????????????????????????????????

  2. cici left a comment on March 24, 2016 at 10:57 pm |

    Gluer for project of vehicle water drop channel
    Major components of the equipment: six-axial robot, double-component polyurethane precision glue supply system, precision double-component gluing head, left-right alternative gluing platform, AB glue automatic feeding system, tool and control system, etc. Automatic loader and unloaded devices are allowed as required by client in order to satisfy with individual demands.
    http://www.hgcx.cn/en/index.php?p=product_show&id=336&c_id=61&o_id=&lanmu=12

  3. Ellmoo left a comment on May 4, 2013 at 10:07 pm |

    nice and easy to install,

    good article

  4. Telecharger left a comment on April 29, 2013 at 10:26 pm |

    Very cool tips here!

  5. Giggantic left a comment on June 14, 2012 at 4:33 am |

    NICE! but how to shape the box? I mean to make more stylish
    thanks

  6. Ross left a comment on March 4, 2012 at 4:51 pm |

    Great work, Thanks.

  7. Eric left a comment on October 15, 2010 at 11:08 am |

    Hi
    I am new at all this and have just used these in a site and they’re working great except for… (why is there always a caveat!!) Is there any way to do this without the href – if someone actually clicks on the tooltip “link”, the page refreshes and they lose their place…???
    Thanks!

  8. Kamote left a comment on June 6, 2010 at 9:14 pm |

    Wow, nice post, nways thanks for mr. anand for making this work on ie perfectly. And to the makers as well, peace out! 🙂

  9. Greg Harris left a comment on May 21, 2010 at 1:15 pm |

    Awesome, blog post!! I just had to comment.

  10. Ilene Jones left a comment on January 12, 2010 at 3:29 pm |

    @mukesh:-

    Noted on other sites with a quick google search, add the following:

    .aaa2 a.tooltip:hover { /*BG color is a must for IE6*/
    background: #E3ECF4;
    text-decoration:none;
    }

  11. megan fox left a comment on September 11, 2009 at 9:41 am |

    Sign: umsun Hello!!! rcuwwymhyw and 6621ssgfhphzye and 3127Sorry, what did you mean?? A??

  12. angelina jolie left a comment on September 10, 2009 at 10:13 am |

    I love your site. 🙂 Love design!!! I just came across your blog and wanted to say that I?ve really enjoyed browsing your blog posts. Sign: ndsam

  13. sandrar left a comment on September 10, 2009 at 6:53 am |

    Hi! I was surfing and found your blog post… nice! I love your blog. 🙂 Cheers! Sandra. R.

  14. didzejevski left a comment on July 4, 2009 at 1:01 pm |

    Looks nice, but there is no text in the tooltip box.
    [Firefox 3.5]

  15. Andre left a comment on February 10, 2009 at 9:12 am |

    Very very nice. Thx a Lot !

  16. anand left a comment on January 18, 2009 at 3:57 am |

    for ie6 add
    a.tooltip:hover { visibility:visible; }
    that’s it!.

  17. mukesh left a comment on January 10, 2009 at 7:06 am |

    hi,
    this does not work in IE6 can any one solve this bug?
    any help will be appreciated…..
    thanx

  18. ivan left a comment on December 21, 2008 at 5:55 pm |

    Good one!

  19. Keat Cat left a comment on December 20, 2008 at 4:17 am |

    Nice work! Very thankful!

  20. Stewart left a comment on November 21, 2008 at 10:36 am |

    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?!

  21. sraj left a comment on November 21, 2008 at 5:58 am |

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

  22. sraj left a comment on November 21, 2008 at 5:57 am |

    It cool thank you for Pure CSS Tooltips

  23. Emil left a comment on November 12, 2008 at 4:40 am |

    Cool

  24. Ethan left a comment on November 9, 2008 at 12:41 pm |

    It cool thank you for Pure CSS Tooltips

  25. Chi left a comment on October 25, 2008 at 4:51 pm |

    I really like this useful tip, thank you!

  26. TG left a comment on October 22, 2008 at 11:11 am |

    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?

  27. portal left a comment on October 9, 2008 at 3:24 am |

    Thanks 🙂

  28. Porkunt left a comment on October 9, 2008 at 2:10 am |

    Thanks ! Good tip & Cool…

  29. Erica left a comment on September 27, 2008 at 6:07 pm |

    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?

  30. Do Nam Khanh left a comment on September 27, 2008 at 10:59 am |

    Thanks for your nice post ^^

  31. Adam left a comment on September 25, 2008 at 8:17 am |

    TY! Just what I was after.

  32. Fikilog left a comment on September 18, 2008 at 10:04 pm |

    Thank you a good tip!

  33. Jack Bhanded left a comment on September 17, 2008 at 9:40 am |

    Hey,

    Thank you! A Good tip!

    Regards,
    Jack

  34. Rock left a comment on September 12, 2008 at 4:24 pm |

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

  35. Rock left a comment on September 12, 2008 at 4:23 pm |

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

    Trigger a tooltip

    Awesomeness!

  36. Nook left a comment on September 12, 2008 at 10:46 am |

    it good Thank!

  37. gre left a comment on September 9, 2008 at 1:16 pm |

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

    thanks jai!

  38. gre left a comment on September 9, 2008 at 10:33 am |

    cool. will try this for my tab menu.

  39. Sam of Fix My Personal Finance left a comment on September 8, 2008 at 10:52 am |

    I wonder how they look like in Chrome browser?

  40. B left a comment on September 8, 2008 at 6:13 am |

    great (tool)tip! thanks.

  41. tmdesigner left a comment on September 6, 2008 at 7:26 am |

    Risorsa davvero carina.. Thanks a lot!

  42. Vincent Cohen left a comment on September 5, 2008 at 11:47 am |

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

    Thanks alot!

  43. M.fei left a comment on September 4, 2008 at 10:10 pm |

    Cool!!!

  44. Sherry left a comment on September 4, 2008 at 7:38 pm |

    Very cool tips here!

  45. Aouni left a comment on September 3, 2008 at 10:10 am |

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

  46. Janko left a comment on September 3, 2008 at 8:29 am |

    Nice and easy 🙂

  47. Chada left a comment on September 3, 2008 at 6:32 am |

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

    Thinks Jai!

  48. BoyGJ.COM left a comment on September 2, 2008 at 7:47 pm |

    Thanks!Learning…

  49. Marine left a comment on September 2, 2008 at 5:48 pm |

    Hmmm….nice

  50. Carola}i{ left a comment on September 2, 2008 at 11:36 am |

    Adding it right now! Great tip 😉

  51. Hussein left a comment on September 2, 2008 at 9:52 am |

    Let me add this to my CSS

  52. Danielctw left a comment on September 2, 2008 at 12:14 am |

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

  53. yusuf1 left a comment on September 1, 2008 at 10:00 pm |

    thanks jai, awesome tips as always!

  54. Love CJ left a comment on September 1, 2008 at 9:07 pm |

    Good Tips.

Leave a Comment

Your email address will not be published. Required fields are marked *

What Others Say

BannerJai was awesome to work with. A port of an ASPX/HTML site to Wordpress went seamlessly, and his recreation of our look and feel were fantastic - Kevin Webster

BannerJai is a talented, creative and an enthusiastic web developer who has worked consistently to deliver high quality websites for my businesses - James Eccles

  •   Let’s Talk

    "Thank you for visiting my website! In order to start a project with me, please send me information on your project so I can figure out how best to help you."

    "After your initial contact, I’ll schedule a quick one-on-one session via Skype to review the project and get to know you."
     Request a Quote
  Have Questions?   Hire Me

Send Me Your Questions

Tell Me About Your Project