CSS3 Demos - Tooltips
Tooltips are small popups that appear when a user hovers over a link, they generally give additional information or assistance. They can be create using JQuery or Javascript, but I prefer to use purely CSS.
CSS Tooltips Demo
Hover over the link to see the tooltip. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt ipsum in quam suscipit eleifend. Curabitur blandit feugiat turpis sed interdum.
What It Should Look Like
Code
HTML
- <p><a class="tooltip" href="#" tip="This is a link to somewhere cool, and the tooltip gives more info about that cool place">Hover over the link</a> to see the tooltip. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt ipsum in quam suscipit eleifend. Curabitur blandit feugiat turpis sed interdum.</p>
CSS
- /*See the foot of the page for browser specific prefixes for border-radius, background and box-shadow*/
- /*FIRSTLY CREATE THE TOOLTIP*/
a.tooltip:after{
content: attr(tip); /*tell browsers to display the contents of 'tip' after the link*/
/*Position the tooltip*/
position: absolute;
top: 2px;
left: -20px;
margin: 1em 0 3em;
/*Style the tooltip*/
font-family: Arial, Helvetica, sans-serif;
font-size: 90%;
line-height: 1.2em;
color: #fff;
background: #075698;
padding: 5px 10px;
border-radius: 6px;
background: linear-gradient(top, #075698, #2e88c4);
box-shadow: 0px 0px 4px #000;
/*Hide the tooltip until it's hovered over*/
display: none;
}- /*CREATE THE TRIANGLE*/
a.tooltip:before{
z-index: 13;
position: absolute;
content: "\00a0"; /*creates a space, similar to in html*/
display: none;
width: 0;
height: 0;
border-style: solid;
top: -1px;
left: 0px;
border-width: 15px 7px 15px 7px;
border-color: transparent transparent #075698;
}- /*MAKE THE TOOLTIP APPEAR WHEN THE LINK IS HOVERED OVER*/
a.tooltip:hover{
z-index: 10;
position: relative;
}
a.tooltip:hover::after{
width: 200px;
display: block;
margin: 25px 0 0 10px;
}
a.tooltip:hover::before{ /*show the triangle*/
display: block;
}
Support & Prefixes
Border radius is supported by all the latest browsers, including IE9. To support older versions there are prefixes...
Mozilla browsers (Firefox): -moz-border-radius:
Webkit browsers (Chrome, Safari): -webkit-border-radius:
Presto browsers (Opera): -o-border-radius:
IE8 and earlier will require CSS3pie - http://css3pie.com/
Box shadow is supported by all the latest browsers, including IE9. To support older versions there are prefixes...
Mozilla browsers (Firefox): -moz-box-shadow
Webkit browsers (Chrome, Safari): -webkit-box-shadow
Presto browsers (Opera): -o-box-shadow
IE8 and earlier will require CSS3pie
Gradient - in addition to the prefix, the code syntax differs for each browser
Webkit browsers (Chrome, Safari): background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f4f2f2), to(#fff));
Mozilla browsers (Firefox): background: -moz-linear-gradient(top, #f4f2f2, #fff);
Presto browsers (Opera): background: -o-linear-gradient(top, #f4f2f2, #fff);
Internet Explorer (in conjuction with CSS3Pie): -pie-background: linear-gradient(#f4f2f2, #fff); behavior: url(/PIE.htc);
CSS3 general code: background: linear-gradient(top, #f4f2f2, #fff);