Fancy CSS3 Tooltips (Yeah, without any JavaScript)

HTML5, CSS3 and JavaScript

The Fine Art of Web Development by Martin Ivanov

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:

[sourcecode language=”css”]
/* apply to elements, containing a data-title attribute */
[data-title] {
position: relative;
padding: 0;

[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::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:

[sourcecode language=”html”]
    <li><a href="" 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="" data-title="Image to Base64 Converter Using the new HTML5 File API">Image to Base-64 Data-URI Converter</a></li>
    <li><a href="" data-title="Hasher uses 40+ encryption algorithms to create encrypted message digests online">Message Digest Encrypter</a></li>

That’s it! Enjoy the weekend!

Related Posts:

Categories and Tags

© 2006 - 2024 Martin Ivanov