Tooltips in CSS3 and HTML5

by Nikolay Izoderov

In this article I’ve decided to write about quite simple and easy method of how to create the simple “tooltips” – pop-up prompts. In this method we will not use JS, we’ll be content with CSS3 and HTML5.

Disclaimer

Actually, css attr() for property of content pseudoelement appeared in CSS2 and in this method, generally, there is nothing new.

Simple method

This method can be used wherein some small “tooltips” are needed.

First I will show you the code:

<span class="tooltip" data-tooltip="I'm small tooltip. Don't kill me!">Hover me!</span>

.tooltip {
    border-bottom: 1px dotted #0077AA;
    cursor: help;
}

.tooltip::after {
    background: rgba(0, 0, 0, 0.8);
    border-radius: 8px 8px 8px 0px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
    color: #FFF;
    content: attr(data-tooltip); /* The main part of the code, determining the content of the pop-up prompt */
    margin-top: -24px;
    opacity: 0; /* Our element is transparent... */
    padding: 3px 7px;
    position: absolute;
    visibility: hidden; /* ...and hidden. */

    transition: all 0.4s ease-in-out; /* To add some smoothness */
}

.tooltip:hover::after {
    opacity: 1; /* Make it visible */
    visibility: visible;
}

We take some element (In our case it’s span), add to it an attribute with text, which will be shown and we take the pseudoelement ::of after. In content of this pseudoelement we, using the most remarkable property – attr(), we set the text to our pop-up prompt and then on: hover we show it. I think that other properties are clear on comments in the code.

Separately I want to mark, how the animation behaves in Chrome and Opera (maybe in IE too).
It is not present. It is connected with that WebKit and Opera does not apply transitions and animation to the pseudoelements ::of before and ::after.
On this occasion there is a bug registered in WebKit.

Method for more complicated tooltips

Sometimes in tooltip there must be not only text, but also some formatting or image which cannot be inserted in the previous method.

Further I will consider only an example that can be done by this method.

And the code:

<a class="htooltip" href="http://habrahabr.ru/">qutIM
<span>qutIM — Free multiprotocol client. It's ported under the great number of  operating systems. <img src="logo.png" />
</span>
</a>

.htooltip span { /* The appearance of our tooltip */
    background-color: rgba(0,0,0, 0.8);
    border-radius: 15px 15px 15px 0px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
    color: #fff;
    margin-left: 2px;
    margin-top: -75px;
    opacity: 0; /* Make it transparent */
    padding: 10px 10px 10px 40px;
    position: absolute;
    text-decoration: none;
    visibility: hidden; /* and hidden */
    width: 350px;
    z-index: 10;
}

.htooltip:hover span { /* show the tooltip when hover */
    opacity: 1;
    visibility: visible;
}

.htooltip span img { /* example image */
    border: 0 none;
    float: left;
    margin: -71px 0 0 -234px;
    opacity: 0;
    position: absolute;
    visibility: hidden;
    z-index: -1;
}

.htooltip:hover span img { /* show the image */
    opacity: 1;
    visibility: visible;
}

Everything is quite simple. On this page you can see the demo example.

P.S. Some of you may ask: And where is HTML5? data-* attributes being a part of HTML5 specification are mentioned in the article.

You might also be interested in..

Making an Image Gallery with CSS3
How to Create Progress Bar with CSS3
SITH – CSS3 Technique for Soft Image Transition
New High Quality HTML5/CSS3 Templates and Themes
50 Useful CSS3 Tutorials
Useful HTML5/CSS3 Snippets For Web Developers
Sprite animation in CSS3
CSS3 Now! Transitions
Sprite animation in CSS3
CSS3 Now! Transitions
Creating HTML5/CSS3 Forms: 30 Helpful Tutorials
Creating CSS3 Navigation Menus: Fresh Tutorials, Techniques and Tools
Creating CSS3 Buttons: Techniques, Tutorials, Tools
Creating CSS3 Buttons: Techniques, Tutorials, Tools

Tags | coding, CSS3, Html5, tips, Tutorials