CSS
Desk
ß
Reset
Reset the code to the default
Blueprint
Grid
Desk
White
Black
12 col
16 col
Change the background
Save
Save your changes to this link
Share
Create a permanent link for this code
Download
Download this code as a file
«
HTML
<a title="This is some information for our tooltip." class="tooltip">CSS3 Tooltip</a>
CSS
body { background: #fff; font: 100%/1.6 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 100px; } .tooltip{ display: inline; position: relative; } .tooltip:hover:after{ background: #333; background: rgba(0,0,0,.8); border-radius: 5px; bottom: 26px; color: #fff; content: attr(title); left: 20%; padding: 5px 15px; position: absolute; z-index: 98; width: 220px; } .tooltip:hover:before{ border: solid; border-color: #333 transparent; border-width: 6px 6px 0 6px; bottom: 20px; content: ""; left: 50%; position: absolute; z-index: 99; }
