CSS3 tooltip with arrow

CSS3 tooltip with arrow

by jQuery DotNet

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan cursus placerat. Nam sit amet mauris lacus. Ut a mauris at orci ultricies vehicula. Proin ut metus massa.Sed nisi tellus, ultricies sed vestibulum at,<a href="#" title="Sample tooltip" class="tooltip">Link</a> sodales ac purus. Aenean vel nisl nulla,  vitae posuere justo. Quisque faucibus venenatis odio eu feugiat. Maecenas vel urna ante, a pharetra felis. Sed elementum, urna vel blandit viverra, dui risus vulputate felis, nec vestibulum lectus nibh sit amet est. <a href="#" title="Sample tooltip" class="tooltip">Phasellus sollicitudin</a> sapien metus. Vestibulum id ultrices erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

CSS

.tooltip{display:inline;position:relative}
 .tooltip:hover{text-decoration:none}
 .tooltip:hover:after{
   background:#111;
   background:rgba(0,0,0,.8);
   border-radius:5px;
   bottom:18px;
   color:#fff;
   content:attr(title);
   display:block;
   left:50%;
   padding:5px 15px;
   position:absolute;
   white-space:nowrap;
   z-index:98
  }
  .tooltip:hover:before{
    border:solid;
    border-color:#111 transparent;
    border-width:6px 6px 0 6px;
    bottom:12px;
    content:"";
    display:block;
    left:75%;
    position:absolute;
    z-index:99
   }