Fancy CSS3 Tooltips (Yeah, without any JavaScript)

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 or download it from here… and 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:

• CSS3 Treeview. No JavaScript.
• HTML5 Resume Generator and Onepager Website
• CSS3 Driven Slides Viewer Without any JavaScript
• Fully Functional CSS3-only Tabstrip Without JavaScript
• Imageless CSS3 Custom Checkboxes and Radio Buttons
• Creating Gaussian Blur Effect With CSS3
• Selecting only the first element occurence out of siblings with the same class name with CSS3
• CSS3 Element Reflections
• How to Style Select Boxes with CSS3
• CSS3 iPhone Toggle Buttons
• CSS3 Background Image Cropping

About these ads