Fancy CSS3 Tooltips (Yeah, without any JavaScript)

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

Here’s a cool code snippet just before the weekend – purely CSS3-driven tooltips. The code below is pretty self-explanatory, so just a few clarifications.

The motivation to use both visibility: hidden and opacity: o – I did it in order to prevent pointer events that will display the tooltip before the mouse actually starts hovering the element. The 50ms delay of the transition is there in order to circumvent and make the animation possible after applying visibility: visible. Finally – currently, the only browser that can play consistent transitions in Firefox, so the other browsers will display the tooltip without the fancy animation. If you like the solution, you can check the demo maybe follow me on Twitter for more cool stuff.

The CSS:

/* apply to elements, containing a data-title attribute */
[data-title] {
    position: relative;
    padding: 0;
}

[data-title]::before,
[data-title]::after {
    position: absolute;
    left: 50%;
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    background: #000;
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, .8);

    -moz-transition: opacity 200ms 50ms linear;
    -webkit-transition: opacity 200ms 50ms linear;
    -ms-transition: opacity 200ms 50ms linear;
    -o-transition: opacity 200ms 50ms linear;
    transition: opacity 200ms 50ms linear;
}

[data-title]:hover::before,
[data-title]:hover::after {
    opacity: 1;
    visibility: visible;
}

/* the tooltip */
[data-title]::before {
    content: attr(data-title);
    width: 120px;
    padding: 4px;
    margin: 30px 0 0 -68px;
    font: normal 11px/16px Arial, Sans-serif;
    color: #fff;
    cursor: default;
    border-radius: 4px;
}

/* the pointer */
[data-title]::after {
    content: "";
    width: 8px;
    height: 8px;
    margin: 26px 0 0 -6px;

    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

Usage… It’s Easy:

Just apply data-attrbiute with some text to the elements that should display the tooltip, for example:

<ul>
    <li><a href="http://stickeez.wemakesites.net" target="_blank" data-title="Sticky notes app using the new HTML5 File API, blob and local storage">Sticky Notes App</a></li>
    <li><a href="http://image2base64.wemakesites.net" data-title="Image to Base64 Converter Using the new HTML5 File API">Image to Base-64 Data-URI Converter</a></li>
    <li><a href="http://hasher.wemakesites.net/" data-title="Hasher uses 40+ encryption algorithms to create encrypted message digests online">Message Digest Encrypter</a></li>
</ul>

That’s it! Enjoy the weekend!

Related Posts:

22 comments

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>