/* This is the 'HTML trigger', copy the following line into your visual editor <a class="tooltip" href="#" data-title="Example of an Easy and Sexy Tooltip">Example</a> CSS Styles (Copy this into the style.css file of your theme) */ .tooltip { display:inline; position:relative } .tooltip:hover { text-decoration:none } .tooltip:hover:after { color:#FFF; font-size: 14px; background:#000; background:rgba(0,0,0,.8); content:attr(data-title); padding:3px 8px; white-space:nowrap; display:block; position:absolute; left:30%; bottom:18px; z-index:8 } .tooltip:hover:before { border:solid; border-color:rgba(0,0,0,.8) transparent; border-width:6px 6px 0 6px; content:""; display:block; position:absolute; left:50%; bottom:12px; z-index:9 }