HTML5, CSS3 & JS Experiments

By Martin Ivanov

Tooltips

Demo

Hover the links on below to see the tooltips in action.

If you like this script, you can also check my personal wesbite, Acid.JS Web.UI, my blog or follow me on Twitter

Usage and Code Insight

<p>Hover the links on below to see the tooltips in action.</p>
<p>If you like this script, you can also check 
    my <a href="http://wemakesites.net/" target="_blank" data-title="Martin Ivanov's personal and portfolio website">
        personal wesbite</a>, <a href="http://acidjs.wemakesites.net/" target="_blank" data-title="Acid.JS Web.UI">
            Acid.JS Web.UI</a>, <a href="https://acidmartin.wordpress.com/" target="_blank" data-title="My blog, established in 2006">
                my blog</a> or follow me on <a href="https://twitter.com/#!/wemakesitesnet" target="_blank" data-title="Follow me on Twitter for daily cool stuff.">
                    Twitter</a></p>
        
/**
 * CSS3 Tooltips
 * Created by Martin Ivanov
 * http://wemakesites.net
 */
 
/* the tooltip will be applied to any element, containing 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);
}