Fronteers artikel: voorbeeld 2

by lensco

HTML

<p>Hoera, tooltips zonder <abbr class="tooltip" data-tooltip="JavaScript">JS</abbr> of <a class="tooltip" href="http://flickr.com" data-tooltip="linkje naar Flickr">afbeeldingen</a>!</p>

CSS

body {
    font: 16px/1.5 sans-serif;
    margin: 20px;
    }
a {
    text-decoration: none;
    }
abbr {
    cursor: help;
    border-bottom: 1px dotted #444;
    }

.tooltip {
    position: relative;
    }
    .tooltip:after {
        display: none;
        content: attr(data-tooltip);
        position: absolute;
        bottom: -29px;
        left: 0;
        line-height: 1;
        padding: 6px;
        background: #000;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        border-radius: 2px;
        font-size: 11px;
        color: #fff;
        white-space: nowrap;
        }
        .tooltip:before {
            display: none;
            content: "";
            position: absolute;
            bottom: -6px;
            left: 6px;
            width: 0;
            height: 0;
            border-bottom: 4px solid #000;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            }
        .tooltip:hover:after,
        .tooltip:hover:before {
            display: block;
            }