<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>
.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 }