CSS3 tooltips

April 28, 2011 by Catalin Rosu - 73 comments

If your icon or button has insufficient text or none at all, or it just needs some additional explanation, then you surely need a CSS3 tooltip for it. Why’s that? Because, as they have proved till now, they can help you improve your website usability.

Having said that, in this article you’ll learn how to create your own CSS3 tooltips: no images, no javascript.

View demo

“Do I really need them?”

The HTML title attribute is the default additional info you can use. But, the default title‘s can’t be styled. So, if you want something cool, that you can style it as you wish, then a custom CSS3 tooltip is the solution.

How is made

The method might be familiar to you, a relative positioned element who wraps an absolute positioned one. With this article I’m not trying to reinvent the wheel, I’m just showing you how to create some cool CSS3 tooltips.

Below you can see the proper structure, note the two pointers (made using :before and :after pseudo-elements ) who overlap:

How the “bordered” pointer is made

Here are the ingredients that were used to create them:

HTML

<a href="#" class="tooltip">
  your text
  <span>Your custom description</span>
</a>

Why an anchor?

Just for compatibility reasons. IE6 has a problem with the :hover pseudo-class used with other elements than anchor.

If you want to use them, and anchors are not an option for you, then you can use this to trigger the tooltips for IE6:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
  $(function() {
    if ($.browser.msie && $.browser.version.substr(0,1)<7)
    {            
      $('.tooltip').mouseover(function(){              
            $(this).children('span').show();                
          }).mouseout(function(){
            $(this).children('span').hide();
          })
    }
  });        
</script>

CSS

.tooltip
{
  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); 
}

.tooltip:hover
{
  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;
}

View demo

Browser support

This is a cross-browser solution, it works also on browsers like IE6 and IE7. Although, it looks quite different as we're talking here about progressive enhancement.

If you enjoyed this article, get updates via RSS or email (it's free).

73 thoughts on “CSS3 tooltips”

Kawsar Ali on April 28, 2011 at 23:43 said:

Looks really good. Thanks for the share
Reply ↓
- Red on April 28, 2011 at 23:48 said:
  
  Kawasar, thanks for your comment!
  Reply ↓
Alejandro on April 29, 2011 at 15:07 said:

Very nice tut! it looks awesome!! thank you!!
but i don’t really understand what ” _background: transparent; ” does! is it in order of make IE works?
Reply ↓
- Red on April 29, 2011 at 15:22 said:
  
  Alejandro, the _background: transparent line is only to solve an IE6 bug.
  For example, instead using background property, you could use also border: none .
  One of the above will fix disappearing spancontent on a:hover. Read more here.
  PS. As a matter of fact, I will update the article soon and I’ll use border property instead background.
  Reply ↓
  - Alejandro on April 29, 2011 at 17:34 said:
    
    Thanks a lot Red!
    i see it much more clear with your explanation and the article you’ve linked is quite simple and explicit. but oh sweet god how i hate IE6! :)
    Reply ↓
Beben Koben on April 29, 2011 at 23:05 said:

simple but so smooth…thanks :)
Reply ↓
- Red on April 30, 2011 at 22:12 said:
  
  Thanks for your comment!
  Reply ↓
Pablo Mendoza on April 30, 2011 at 08:12 said:

Great, I was doing something like that and you gave me some ideas.
Reply ↓
- Red on April 30, 2011 at 22:13 said:
  
  Nice to hear you got inspired by this article, thanks for your comment.
  Reply ↓
Seth Stevenson on April 30, 2011 at 08:44 said:

I like it! With HTML5 becoming more widely used I’m wondering if it might be good to use the tag rather than a tag, since can be used for related content.
Just a thought.
Reply ↓
- Seth Stevenson on April 30, 2011 at 08:45 said:
  
  Looks like my HTML got stripped from my comment. I was saying using the “aside” tag rather than a “span” tag.
  Reply ↓
  - Red on April 30, 2011 at 22:19 said:
    
    Seth, thanks for your comment and sorry, HTML code is note allowed here.
    Regarding your question, I’m not sure the HTML5 aside element would match (semantically speaking).
    Instead, I’m thinking about the HTML5 custom attribute data-*. Maybe I’ll write an article about using this HTML5 stuff to create a tooltip. :)
    Reply ↓
    - Torben on May 15, 2011 at 03:28 said:
      
      Thanks for a great way of showing how to use pure css for tooltips, as I’m trying to miminize the load on the server.
      As for using html5, I just a had look at which tag to use, and the “head” and the “detail” tag would be the new tags to use, and they fit exactly this purpuse.
      The “detail” tag even has an attribute of “open”, so actually made just for stuff like a tooltip.
      Reply ↓
      - Red on May 15, 2011 at 13:11 said:
        
        Torben, it’s nice to hear you liked this article!
        Regarding using now a HTML5 semantic tag for these tooltips, I couldn’t say as the drafts are continuously changing!
Mon Mohon Singha on May 9, 2011 at 02:56 said:

nice work………..
Reply ↓
- Red on May 9, 2011 at 09:23 said:
  
  Nice to hear you like it, thanks for commenting.
  Reply ↓
Magento Extension Development on May 23, 2011 at 15:41 said:

good initiative! thanks for sharing useful tips and information
Reply ↓
Mark on May 26, 2011 at 11:41 said:

Great tips. Keep them coming.
Reply ↓
- Red on May 26, 2011 at 11:49 said:
  
  It’s always good to hear that!
  Reply ↓
リサイクルトナー on July 28, 2011 at 10:07 said:

For CSS3, I do not know just yet due to lack of studying, I felt so many things you can look to this page.
Reply ↓
Nigel on July 30, 2011 at 21:06 said:

This is so good but
Is there any way to apply this to an image map?
Reply ↓
- Red on July 30, 2011 at 21:47 said:
  
  Nigel, I don’t see any reason to not use this also for an image map.
  Reply ↓
  - Nigel on July 31, 2011 at 11:16 said:
    
    It seems that by adding this (below) to the CSS and using area coordinates in the HTML, you can get the tooltip to map specific areas. What has me stumped though is getting the tool tip to appear over the specific part of the image defined by the coordinates rather than at the fixed position. Any help much appreciated, thanks.
    map { position: relative; }
    area + span { position: absolute; margin-left: -9999em; }
    area:hover + span {
    position: absolute;
    bottom: 10px;
    left: 50%;
    z-index: 999;
    width: 230px;
    margin-left: -127px;
    padding: 10px;
    opacity: .9;
    font: 1.1em helvetica,arial,sans-serif;
    color: #000050;
    border: 2px #000dc7;
    text-shadow: #000 1px 1px 1px;
    background-color: #61bde7;
    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 2px 4px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
    box-shadow: 0 2px 4px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
    text-shadow: 0 1px 0 rgba(255,255,255,.4);
    }
    Reply ↓
    - Red on July 31, 2011 at 11:57 said:
      
      Perhaps you could use something like jsFiddle to show me a complete example.
      Reply ↓
      - Nigel on July 31, 2011 at 17:02 said:
        
        Thank you,
        It’ll be here http://jsfiddle.net/Generally_or_Specifically/9E8md/
        I think…(I believe I should be described as a ‘Newbie’…
Justin Sternberg on September 6, 2011 at 15:33 said:

This looks awesome! Any chance you can include screenshots of the “graceful degradation?”
Reply ↓
veteran on September 17, 2011 at 01:55 said:

nice tools :) thanks
Reply ↓
Jas on September 29, 2011 at 11:26 said:

great tip, thank you so much. I’m using it on a site!
Reply ↓
- Red on October 3, 2011 at 01:08 said:
  
  Jas, nice to hear that!
  Reply ↓
sascha on October 2, 2011 at 20:10 said:

thank you,
it was simple to add css3 transitions for fade-in and out-effects and put the tip on top of the bubble. css-only. rocks big time!
Reply ↓
- Red on October 3, 2011 at 01:14 said:
  
  Sascha, you’re welcome. I’m glad to hear you found these tooltips useful!
  Reply ↓
Wuilliam Lacruz on November 14, 2011 at 21:49 said:

What a good idea to make an arrow using the span top border and empty content. Ha! I never would have imaginated that.
Thanks for that, i will to use, i a very very good idea.
Reply ↓
- Red on November 14, 2011 at 21:53 said:
  
  Wuilliam, nice to hear you like it. ;)
  Reply ↓
Myrddin on November 15, 2011 at 00:54 said:

Hello,
thanks for providing this great way of adding a tool-tip. It really does look amazing, stumbled over this site by searching for a nice way to implement a decent looking tool-tip function.
Hmh. I have been trying to add this to my site, but I cannot get this to work. First of all, the page I am trying to add it to lists perks for a game like
number, skill
and I thought it would be nice to have the actual text of the skill as mouse-over and thought this would work great.
player.addperk 000be127 : adds the Alchemist 1/5 perkPotions and poisons you make are 20% stronger.
or
player.addperk 000be127 : adds the Alchemist 1/5 perkPotions and poisons you make are 20% stronger.
I can see the cursor change, changed background but when I hover over the text no window pops up.
The page is located at: http://skyrim.mmo-game.eu/cheats-and-console/ (I have only this one line under Alchemy atm with the span tags, before I convert the whole content and would prefer to not use anchor for it.
Reply ↓
- Myrddin on November 15, 2011 at 06:32 said:
  
  It seems to not work with the template I am using. List items, etc will no longer be properly aligned. But this post inspired me on how to get started on this and the result is ok.
  Reply ↓
  - Red on November 15, 2011 at 09:23 said:
    
    Hi Myrddin,
    nice to see you’re using these tooltips I made. I think they look pretty good now on your site, perhaps they just need some tweaks but you’re on the right track.
    Good luck and thanks for sharing your thoughts with us!
    Reply ↓
    - Myrddin on November 20, 2011 at 12:30 said:
      
      Thanks, np. The site needed some css tweaks anyhow, it is by far not as well styled and proper coded as yours :D
      Reply ↓
drozzy on December 6, 2011 at 19:46 said:

This line right here screw up existing layouts:
.tooltip
{
position: relative;
Reply ↓
- Red on December 6, 2011 at 23:17 said:
  
  drozzy, feel free to change the CSS class names.
  Reply ↓
MechanisM on December 11, 2011 at 15:09 said:

Hello! I did pure CSS3/HTML5(without any javascript) tooltip here: http://jsfiddle.net/MechanisM/B86dM/
But it’s needs little improvements.
Reply ↓
Seaman on January 19, 2012 at 19:35 said:

Great work,perfect functionality,one of the best pure css tooltips right now..well done
Reply ↓
- Red on January 19, 2012 at 19:52 said:
  
  Thank you very much Seaman. ;)
  Reply ↓
alvin on January 22, 2012 at 12:13 said:

Hi, Catalin Rosu / Red..
What is ‘margin-left :-127px’ for ?
If I apply this tooltip in the first part of a line, then the left part of the baloon is cropped and gone.
I’ve found that I need to increase the value of ‘margin-left’ to around -80px..
but I’m not sure with this solution since I’m just a newbie in CSS.
Need your advice, Red
:)
many thanks
Reply ↓
- Red on January 22, 2012 at 12:31 said:
  Hey Alvin, here’s the explanation:
```
.tooltip span {
  width: 230px;
  position: absolute;
  left: 50%;
  margin-left: -127px;
  padding: 10px;
  border: 2px solid #ccc;
}
```
  According to the CSS box model, the total computed width for the .tooltip span will be:
  width + left padding + right padding + left border + right border = 230+10+10+2+2 = 254px (in our case).
  Now, while .tooltip span is basically the content wrapper for the tooltip, we need to center it horizontally. This can be done by using absolute positioning, set left/right value to 50%, and then set margin-left/right to half of the total width (254px/2=127px).
  Hope that helps!
  Reply ↓
  - alvin on January 22, 2012 at 13:29 said:
    
    Okay, I see.. Many thanks for the explanation.. that’s clear for me..
    I guess I’ll increase the margin-left and reduce the left padding value.
    :)
    Thanks again for your help, Red…
    Reply ↓
    - alvin on January 22, 2012 at 13:31 said:
      
      (oops… i mean left position value) :)
      Reply ↓
Kim on February 4, 2012 at 01:17 said:

I cannot get this (or any other similar CSS3 tooltips) to work properly. For some reason, having position: relative on the anchor makes the tooltips not show up. The span is there and positioned properly, but it’s invisible. On the surface, it appears to be a stacking order issue, except that the tooltip shows up (in the wrong place, but at least it’s visible) when I remove position:relative from the anchor. However, that (naturally) causes other problems. Any idea why this might happen? I’ve played with stacking orders and positioning on containing elements with no luck.
Reply ↓
- Red on February 4, 2012 at 17:23 said:
  
  Kim, I’d suggest you to start with a clean HTML template. Then, just add your styles progressively and see what breaks your tooltips.
  Reply ↓
  - Kim on February 4, 2012 at 17:26 said:
    
    I’ve already fixed this, actually, but thanks! Turns out I had an overflow: hidden set by a sprite generator’s code that I had forgotten to delete. Works nicely now, thanks for the great tutorial!
    Reply ↓
Rolf3d on February 22, 2012 at 14:08 said:

This is awesome thanks a million. great job…
Reply ↓
Ed on February 22, 2012 at 18:53 said:

Hi Red,
Really like the implementation here. I’m interested in using this on an HTML document in Safari on an iPad. The tooltips appear OK, but there is no way of triggering a mouseout event to make them disappear again in your example. Do you know how we could do this?
Reply ↓
- Red on February 22, 2012 at 21:35 said:
  Hi Ed, I’m glad you like my tutorial.
  Regarding your question, I’d suggest you using jQuery’s event.stopPropagation() after you initially hide the tooltips when clicking on the document.
  Something like that:
```
$("html").click(function(){
  $(".tooltip span").hide();
});

$(".tooltip").click(function(event){
  event.stopPropagation();
});    
```
  Hope that helps!
  Reply ↓
Le on March 9, 2012 at 18:56 said:

Thanks for a great tutorial. How would I use this on an input textbox field when it receives focus?
Reply ↓
Anonymous on March 16, 2012 at 17:47 said:

Small CSS modification that adds an animation:
body
{
color: #222;
font-family: ‘Lucida sans’, Arial, Helvetica;
width: 600px;
margin: 50px auto;
font-size: small;
line-height: 1.4;
}
.tooltip
{
position: relative;
background: #eaeaea;
cursor: help;
display: inline-block;
text-decoration: none;
color: #222;
outline: none;
}
.tooltip span
{
opacity: 0;
left: 50%;
position: absolute;
z-index: 999;
width: 230px;
margin-left: -127px;
padding: 10px;
border: 2px solid #ccc;
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);
transition: opacity 1s, bottom 1s;
-moz-transition: opacity 1s, bottom 1s; /* Firefox 4 */
-webkit-transition: opacity 1s, bottom 1s; /* Safari and Chrome */
-o-transition: opacity 1s, bottom 1s; /* Opera */
}
.tooltip:hover
{
border: 0; /* IE6 fix */
}
.tooltip:hover span
{
opacity: .9;
bottom: 30px;
}
.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;
}
/* Yellow */
.yellow-tooltip span
{
border-color: #e1ca82;
background-color: #ffeaa6;
}
.yellow-tooltip span:after
{
border-top-color: #ffeaa6;
}
.yellow-tooltip span:before
{
border-top-color: #e1ca82;
}
/* Navy */
.navy-tooltip span
{
color: #fff;
text-shadow: 0 1px 0 #000;
border-color: #161a1f;
background-color: #1e2227;
}
.navy-tooltip span:after
{
border-top-color: #1e2227;
}
.navy-tooltip span:before
{
border-top-color: #161a1f;
}
/* Blue */
.blue-tooltip span
{
border-color: #59add4;
background-color: #61bde7;
}
.blue-tooltip span:after
{
border-top-color: #61bde7;
}
.blue-tooltip span:before
{
border-top-color: #59add4;
}
/* Pink */
.pink-tooltip span
{
border-color: #ce4378;
background-color: #ea4c88;
}
.pink-tooltip span:after
{
border-top-color: #ea4c88;
}
.pink-tooltip span:before
{
border-top-color: #ce4378;
}
Reply ↓
Omer cansizoglu on March 21, 2012 at 04:40 said:

Great post!
Is there an easy way to make alternate pointer at left or top side? I guess i need to play with border color.
Reply ↓
- Red on March 21, 2012 at 09:07 said:
  
  Indeed, you need to play with both border and absolute positioning. Good luck!
  Reply ↓
Anders on May 14, 2012 at 21:28 said:

Cool… Is it possible to use this on image maps? So you don’t need any jQuery as your other example?
Reply ↓
- Catalin Rosu on May 14, 2012 at 23:00 said:
  
  It really depends on the situation. You are the one who needs to chose the way you want to handle tooltips. :)
  Also, the answer is yes. This solution does not require JavaScript (jQuery) as this one.
  Reply ↓
  - Anders on May 14, 2012 at 23:04 said:
    
    Ok, and you can use the “linked” solution on images like this?
    http://www.red-team-design.com/image-map-with-css3-jquery-tooltips
    Reply ↓
    - Catalin Rosu on May 14, 2012 at 23:08 said:
      
      Of course, why not… Just keep in mind that every method has its pros and cons.
      Good luck with implementation! ;)
      Reply ↓
Tim on May 21, 2012 at 11:05 said:

Hello, nice work, but how can I close a tooltip an the IPad? Is it possible to add a close button? Or close it by clicking on the Tooltip itself?
Thanks :-)
Reply ↓
- Catalin Rosu on May 21, 2012 at 11:30 said:
  
  Hi Tim,
  Tooltips were always tricky on iOS, as they are triggered on hover. As you already know, there’s no hover on iPad.
  Perhaps a quick solution would be just to hide them (using JavaScript) for iOS?
  You can check my CSS3 animated dropdown menu to see an example related to targeting specific devices.
  Reply ↓
  - Tim on May 21, 2012 at 19:25 said:
    
    I think JQuery ist a bit to heavy for simply unhide it by clickin on the Tooltip. This simple function don’t need to be enabled for specific diveces, because it don’t influence the PC-user, its just on top. I will see what I can do… Thank you very much
    Reply ↓
Sangy on May 22, 2012 at 21:31 said:

very well written tutorial. I tried and it does work beautifully. My dilemma is – It does not work on ipad…any suggestion on how I can get this to work on Ipad?
Reply ↓
Adrian on May 25, 2012 at 12:17 said:

O treaba foarte buna! Multumesc frumos!
Reply ↓
Adam on July 17, 2012 at 14:21 said:

Another great tutorial Red!
This is great for text!
How would you apply the same technique using an image with hotspots???
Would really appreciate your help!
Reply ↓
- Catalin Rosu on July 17, 2012 at 18:57 said:
  
  Maybe this is what you want: http://www.red-team-design.com/image-map-with-css3-jquery-tooltips
  Reply ↓
xuing on August 7, 2012 at 15:23 said:

cool~
Reply ↓
Alessandro Marinuzzi on September 28, 2012 at 10:35 said:

Simple very great! I love these ToolTip that use only CSS2/CSS3! Javascript is optional… I managed your code in order to adapt to my necessities… thanks very much for sharing all that!
Reply ↓
Dhafian on November 3, 2012 at 14:06 said:

This is really nice tooltips. I have bookmark this site. Fully love this tricks. Thanks..
Reply ↓
deep on December 7, 2012 at 13:08 said:

thank you！
Reply ↓
Tomás Pereira on February 13, 2013 at 20:14 said:

I´m 16 years old, and i´m trying to be like you;but more taller an dwith less hair
Anyway, I would like to thank you for your job!
Portugal is with you!
Reply ↓
Gary Pacheco on April 17, 2013 at 00:10 said:

Awesome stuff, thanks Red!
Reply ↓