HTML5 snippet : CSS Tooltips

 <!doctype html>
<html>
<head>
<style>
body {
    background:#e6e6e6 url(http://i1208.photobucket.com/albums/cc369/sl1dr/noise.png) 0 0 repeat;
}
div {
    background:#f6f6f6;
    color:#444;
    border:5px solid #ececec;
    margin:50px auto;
    padding:40px 50px;
    width: 300px;
}
a { 
    border-bottom:1px solid #bbb;
    color:#666;
    display:inline-block;
    position:relative;
    text-decoration:none;
}
a:hover,
a:focus {
    color:#36c;
}
a:active {
    top:1px; 
}

/* Tooltip styling */

a[data-tooltip]:after {
    border-top: 8px solid #222;
    border-top: 8px solid hsla(0,0%,0%,.85);
    border-left:8px solid transparent;
    border-right:8px solid transparent;
    content:"";
    display:none;
    height:0;
    left:25%;
    position:absolute;
    width:0;
}
a[data-tooltip]:before {
    background: #222;
    background: hsla(0,0%,0%,.85);
    color: #f6f6f6;
    content:attr(data-tooltip);
    display:none;
    font-family:sans-serif;
    font-size:14px;
    height:32px;
    left:0;
    line-height:32px;
    padding:0 15px;
    position:absolute;
    text-shadow:0 1px 1px hsla(0,0%,0%,1);
    white-space:nowrap;
    -webkit-border-radius:5px;
       -moz-border-radius:5px;
         -o-border-radius:5px;
            border-radius:5px;
}
a[data-tooltip]:hover:after {
    display:block;
    top:-9px;
}
a[data-tooltip]:hover:before {
    display:block;
    top:-41px;
}
a[data-tooltip]:active:after {
    top:-10px;
}
a[data-tooltip]:active:before {
    top:-42px;
}
</style>
</head>
<body>
<div>
    <p>I am a paragraph containing a link. Would you like to <a href="#" data-tooltip="I am so glad you decided to hover!">hover over me</a> at all?</p>
</div>
</body>
</html>
You must login to edit.

1

CSS Tooltips

You must login to vote.
