Navigation

How to create a simple CSS3 tooltip

By Keenan Payne | CSS, HTML, Usability | Nov 28, 2012

Tooltips are a great way to show your user more information by simply hovering over an image or text.  They can be used, for example, to provide captions for images, or longer descriptions for links, or any useful information which would improve the user experience of your site, without intruding on the design.

Today I’m going to show you how to create a simple tooltip using HTML and CSS to display the title tag of your hyperlinks.

Let’s start off by creating some simple markup for the link. We need to give it a title which will be the tooltip content, and assign it a class:

<a title="This is some information for our tooltip." class="tooltip">CSS3 Tooltip</a>

The next step is to create some rudimentary styling for our tooltip class:

.tooltip{
    display: inline;
    position: relative;
}

We are now displaying our tooltip inline with our link using relative positioning. Next we want to create the a rounded box to form the body of the tooltip, and position it so that it floats above the link:

.tooltip:hover:after{
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    content: attr(title);
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 220px;
}

We are using the :hover selector which selects an element, in this case our link, on mouseover and the :after selector, which inserts content after the selected element. We have specified a black background with 80% opacity, and for browsers that do not support RGBA colors we have provided a dark grey background.

Slightly rounded corners are created by using the border-radius attribute and we have set the text color to white. Lastly, we have positioned the tooltip box from the left of the link and added a little padding.

As well as the styling and positioning, we have set the content property:

content: attr(title);

This property allows us to insert the content we want which can be a string, a media file or an attribute of the element. In this case we are using the title attribute of the link. 

Now when you hover over your link a tooltip should be appear above it with the text you set as your link title. We have one problem though, the title information is being shown twice: once in the tooltip and once by the browser. To fix this we need to make a slight change to our HTML:

<a href="#" title="This is some information for our tooltip."><span title="More">CSS3 Tooltip</span></a>

What we’ve done here is is wrap the link text in a span tag with its own title attribute. Now the browser will display the title set in the span tag when the link is hovered over.

To finish we will add an arrow to the bottom of the tooltip, to give it that little extra touch of style. We do this by using the :before selector and some border styles:

.tooltip:hover:before{
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}

We are using a few border hacks here to create the effect of an arrow: setting the border colors on the left and right to transparent and controlling the border widths. We’ve also positioned the arrow so it sits on the bottom of the tooltip box.

And there you have it, a simple tooltip with the title tag of the element hovered over. You could also use this for image alt tags, or even just put your own text into the CSS to pop up where you want.

You can view a working demo here.

 

How do you build tooltips? Have you used this technique on a site? Let us know in the comments.

Featured image/thumbnail, hint image via Shutterstock.

Share this post
Comments (no login required)
  • http://about.me/evanjacobs Evan Jacobs

    No demo URL?

  • http://twitter.com/redcrew DeborahEdwards-Onoro

    Thanks for the tutorial. What happens on touch devices, that don’t understand hover?

  • 1076

    Excellent tip! This is the easiest way to support tooltips that I’ve seen yet. Very clever use of the attr() function!

    In case anyone wants to eliminate the browser’s title tooltip all-together, the css “attr()” function will grab any attribute from the element, even made up ones.

    In a test that worked in Chrome, FF, and IE10, I gave my element a “tooltip” attribute and used the css to grab that attribute instead of the title.

    For example:

    <a href=”#” tooltip=”This is a tooltip” class=”tooltip”>Check it out…</a>

    and in the css:

    .tooltip:hover:after
    {
    [...]
    content: attr(tooltip);
    [...]
    }

    Anyway, let me know if there’s any issues with this. I just thought I’d share.

    • 1076

      http://davidmercer.com/tooltip.html
      There’s a demo of various methods in action.

      You’ll notice an anchor underline in FF and IE, but I didn’t have that issue in Chrome.

  • http://twitter.com/michaelwalmsley Michael Walmsley

    I tend not to use tool tips on commercial websites as I find them difficult to integrate into a CMS so that the site owner can add their own tips. I have used them on a couple of Intranets that I have built.

    I think they are good if used sparingly, I find a page that is full of tool tips would be better if it was split into two pages so that concepts can be explained more clearly.

    Mike

  • http://twitter.com/Brammm Bram Van der Sype

    Really curious to see this in effect, too bad there’s no demo on here anywhere.

  • http://twitter.com/GroupOf_1 David Woods

    Looks great! I couldn’t get it to work in IE8 unless I turned off compatibility mode. In Firefox, if you just use an empty space in the span title, the browser’s default tooltip disappears. In Safari and IE, you still get the yellow box even though there is no text.

    • Benjie

      Probably best not to use a blank title, semantically it’s not correct and you’ll lose the tooltip altogether if the CSS isn’t supported.

  • peter

    no demo, not going to even take the time to read it..

  • Y-Nell

    Here’s a demo I made on CSSDESK: http://cssdesk.com/44ByF

  • Alonso

    Thanks for the tutorial! I did a test here and I also tried 1076 suggestion

    • 1076

      Ah, data attributes. I always forget about that.
      Nice work!

  • Marten Mühlenstein

    Here’s a demo: http://jsfiddle.net/5EQ5b/ :)

  • http://www.facebook.com/people/Manuel-Cheta/683694517 Manuel Cheta

    Guys, I have been searching for a nice and easy example. You made my day :D

  • Shelley Lowery

    Get tooltip! I love it! Thanks for sharing :)

  • qgustavor

    I use it on one of my websites, works great in Chrome, in IE10 and Firefox is also animated but in older IE it is causing a big mess: the tooltip is joining with the a element and two tooltips in the same place make things weird. IE don’t support pointer-events because it is experimental.

    What I can do is, like in the example, make the tooltip harder to get hovered. In the example you can hover the a then hover the tooltip, and it will not hide. Also other thing make my tooltip bad: for the animation the tooltip fades out from the a element.

  • http://twitter.com/SaggezzaUX Saggezza UX

    How does adding the second title effect SEO and assisted screen readers? I feel like adding repetitive “more” titles will hurt not only page rank, but will also be annoying for the less fortunate when using screen reader applications.

  • http://twitter.com/SaggezzaUX Saggezza UX

    Interesting approach to custom tooltips. However this approach raises a few flags: 1) how does adding the second title attribute effect SEO and 2) adding the second title attribute will create havoc for users using screen readers.

  • Evert

    I would personally add ARIA attributes (aria-describedby and role=’tooltip’)

  • http://www.techflashed.com/ Tech Flashed

    Cool Work , i have to say .

  • Hency

    Hi thanks for the tutorial. However it does not work for me..may be i am doing something wrong. Here is what I have.

    I have a button on which i need a tooltip when user hover over it.

    the code is:

    css:
    .icons a .notifications{background-image: url(‘../img/notifications.png’);
    width: 30px;
    height: 30px;
    margin-left: 15px;
    background-repeat: no-repeat;}

    .icons a .notifications:hover{background-image: url(‘../img/notifications_hover.png’);}

    I dont know where to put tooltip class and css for that?

    Please help.