HTML CSS examples for CSS Widget:Tooltip
Aligning customized Tooltip balloon to the right
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> a[bubbletooltip]:link, a[bubbletooltip]:visited { text-decoration:none;<!--from ww w. j ava2 s. c o m--> position:relative; color:Chartreuse; } a[bubbletooltip]:before { content:""; position:absolute; border-right:22px solid yellow; border-top:22px solid blue; border-bottom:22px solid pink; visibility:hidden; bottom:-13px; right:-21px; } a[bubbletooltip]:after { position:absolute; content:attr(bubbletooltip); color:WhiteSmoke; font-weight:bold; right:-69px; bottom:-17px; width:41px; background:OrangeRed; padding:6px 11px; -moz-border-radius:7px; -webkit-border-radius:7px; -khtml-border-radius:7px; border-radius:7px; visibility:hidden; } a[bubbletooltip]:hover:before, a[bubbletooltip]:hover:after { visibility:visible; -moz-transition:visibility 0s linear .4s; } </style> </head> <body> <br> <br> <br> <br> <p align="center"> Hi, <a href="#" bubbletooltip="Hi I am a bubble tooltip">This is a demo </a> </p> </body> </html>