Simple Css Only Tooltip Hover Descriptions For Blogger

Posted : Thursday, May 05, 2011 | Post Author : Paul Crowe | 12 comments

The Tooltip has become a common resource and is used by all the major sites to describe a link or give more help and information on a section of text.Often when using Google products you will see a small question mark that you can hover over to see a pop up with more information.I covered tooltips before using html, javascript and images to create the actual pop up.In this post however i have a really cool way to have tooltips on your blog using just Css.If your not too savy when it comes to this sort of thing, basically this is much easier, much faster to load and presents less chance of errors.

“..The tooltip or infotip is a common graphical user interface element. It is used in conjunction with a cursor, usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a tooltip may appear—a small “hover box” with information about the item being hovered over..”


The Demo

The words that have tooltips attached have a grey background, when hovered over the tooltip appears with a small question mark beside the cursor.

View Demo Button

Add The Pure Css Tooltips To Your Blog

To use the tooltips on your blog you need to first add the Css to your template, we will add it via the template designer so its very easy.You then just add some tags around the words or sentences you want to have tooltips.This works across the browsers, although IE wont have the transparent effect on the actual tip it still looks great.

Add the Css to your blog

Step 1. In your Blogger dashboard click > Design > Template Designer :

Step 2. In the template designer click > Advanced > Add Css > :

Step 3. Copy and paste the following code into the section with ‘Paste Code Here’ in image above :

position: relative;
background: #eaeaea;
cursor: help;
display: inline-block;
text-decoration: none;

color: #222;

outline: none;

.tooltip span
visibility: hidden;
position: absolute;
bottom: 30px;
left: 50%;
z-index: 999;
width: 230px;
margin-left: -127px;
padding: 10px;

border: 2px solid #ccc;

opacity: .9;

background-color: #ddd;

background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
-moz-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
text-shadow: 0 1px 0 rgba(255,255,255,.4);

border: 0; /* IE6 fix */

.tooltip:hover span
visibility: visible;

.tooltip span:before,
.tooltip span:after
content: “”;
position: absolute;
z-index: 1000;
bottom: -7px;
left: 50%;
margin-left: -8px;

border-top: 8px solid #ddd;

border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 0;

.tooltip span:before

border-top-color: #ccc;

bottom: -8px;

Note – The highlighted sections are the colors of the tooltips and can be changed to suit your blog.See some color options here – Color Chart.

Step 4. Click apply to blog in the top right of your screen to save, we now have the Css in place to create the tooltip next we will see how to add the tool tip to text.

Adding the tooltip to text

When writing a post and you want to add a tool tip to some text you do it as shown below :

<a href=”#” class=”tooltip”>
The Text That Will Have A Tooltip
<span>The Actual Description That Appears On Hover</span>

So on the demo page you seen the first tooltip is coded like this :

<a href=”#” class=”tooltip”>Phasellus fermentum <span>This is the tooltip description</span></a>

That’s a Css only Tooltip, credit goes to Red Team Design.

Drop your comments and questions below.


  1. Another awesome post Paul! Hovering description is indeed a creative idea but I guess I will stick with using brackets for description :p. Looks too much of hassle to create the description.


  2. a very good post but i am not using by default template provided by blogger so there is still this option is available of CSS?


  3. @ Jeet – You should still have the Add Css option on a custom template.I was sure it was there for all templates and i have not seen a template used that does not have that option ?


  4. real nice! Thanks for the tip! @Jeet: I have a customized blogger theme and Oaul was right, you can still see the ADD CSS option.

    Thanks alot!


  5. Hey Brother Please Share How to add
    Blogger comments Discus Comments facebook comments
    like this blog


  6. Thanks for the tip very useful.


  7. When I pasted this code into the add CSS field in blogger all that code appeared at the top of the page when I viewed the blog. Did I do something wrong?


  8. hi paul i was thinking ive got hovering menu in my css field before can i still add another cos there


  9. I think something is wrong with my template this simple css doesn’t apply on the tooltip effect.


  10. This works great, but the code in my post gets broken if I switch from html to compose mode.


  11. can i use this on a Image


  12. Awesome Tip Paul.