Simple Tooltip

get tooltip text from title attribute

by Adrian Enriquez

HTML

<br/><br/><br/><br/><br/><br/>
adsfa asdjk ajflkj; ;aklj daflj d;lkaj ;dj kljdfslkja kldjl 
<a href="#" class="tooltip" title="Sample tooltip asdf akfj  kladsjk  akdfl jakldsjl akjsd flak dfjlaj ldfk ajldsfj aljds kjla sdjfakl dsjfkl ajldfs kjladk fjalj dflkja dlsjf lalsd kjfals dlkaf jkldsfj klajd kaj dsklfjakls djfklaj ldsfj ajsdkf jaldks aklj ldkja kl">pellentesque asd fadsf a d</a> enim.

CSS

.tooltip {
    display: inline;
    position: relative;
}

.tooltip:hover:after {
    content: attr(title);
    width: 530px;
    background: #111;
    background: #363636;
    border-radius: 4px;
    bottom: 1.35em;
    color: #fff;
    display: block;
    left: 50%;
    margin-left:-265px;
    padding: .3em 1em;
    position: absolute;
    z-index: 98;
}

.tooltip:hover:before {
    border: solid;
    border-color: #111 transparent;
    border-color: rgba(0,0,0,.8) transparent;
    border-width: .4em .4em 0 .4em;
    bottom: 1em;
    content: "";
    display: block;
    left: 50%;
    position: absolute;
    z-index: 99;
    margin-left: -.2em;
}