Pure CSS3 Animated Tooltip Cross Browser Tutorial
The Tooltips only pop up with no animation in IE8-less and iPad/iPhone.
Wow - this took me an extremely long time to work out all the kinks. I only had the patients for it because it was originally done for my own personal project. I did not do it all on my own though. Coming off a year hiatus from web design, I have to pay homage to Paul OB over at Sitepoint for helping me work out all the cobwebs. Originally I was looking for a way to automagically center each tooltip - regargless of width - with animation - cross browser - and with my exact positioning and style I had in mind. After my many failed attempts, I resorted to the fixed width version featured here in this tut. This gave me more control over varoius small details that were crucial to me. As opposed to most other CSS3 tooltips you will find elsewhere on the web, this tooltip perfectly gracefully degrades in lesser browsers (cough-cough-IE). Not to mention the animation is slick. Depending on YOUR websites background and tooltip color, you may have to tweek the opacity/rgba of the tooltip/triangle to get it blended together perfectly like mine. The rest is COPY-n-PASTE!
The CSS
.tooltip {
position:relative; /* make span relative to anchor */
text-decoration:none; /* no underline */
cursor:pointer; /* make cursor point */
}
.tooltip span { /* main body of tooltip */
position:absolute; /* AP it */
bottom:66px; /* FADE IN/OUT BEGIN */
left:50%; /* CENTER TOOLTIP */
margin-left:-72px; /* CENTER TOOLTIP */
width:130px; /* tootip width */
opacity:0; /* HIDE TOOLTIP in modern browsers */
visibility:hidden; /* HIDE TOOLTIP in IE */
padding:10px 5px; /* padding */
color:#fff; /* text color */
font:bold 75%/1.5 Arial, Helvetica, sans-serif; /* font */
text-align:center; /* center text */
pointer-events:none; /* no unintended tooltip popup for modern browsers */
border-radius:6px; /* round corners */
text-shadow:1px 1px 2px rgba(0, 0, 0, 0.6); /* text shadow */
background:rgb(46,182,238); /* IE6/7/8 */
background:rgba(46,182,238,.8); /* modern browsers */
border:2px solid rgb(255,255,255); /* IE6/7/8 */
border:2px solid rgba(255,255,255,.8); /* modern browsers */
box-shadow:0px 2px 4px rgba(0,0,0,0.5); /* shadow */
-webkit-transition:all 0.3s ease-in-out; /* animate tooltip */
-moz-transition:all 0.3s ease-in-out; /* animate tooltip */
-o-transition:all 0.3s ease-in-out; /* animate tooltip */
-ms-transition:all 0.3s ease-in-out; /* animate tooltip */
transition:all 0.3s ease-in-out; /* animate tooltip */
}
.tooltip span.dif { /* different width tooltip */
width:190px; /* width */
margin-left:-102px; /* center it */
}
.tooltip span:before, .tooltip span:after { /* bottom triangle - the white border */
content:''; /* add html content */
position:absolute; /* AP bottom triangle */
bottom:-13px; /* position bottom triangle */
left:50%; /* center bottom triangle */
margin-left:-12px; /* center bottom triangle */
border-left:12px solid transparent; /* build bottom triangle */
border-right:12px solid transparent; /* build bottom triangle */
border-top:12px solid rgb(255,255,255); /* build bottom triangle IE6/7/8 */
border-top:12px solid rgba(255,255,255,.8); /* build bottom triangle modern browsers */
}
.tooltip span:after { /* top triangle - the blue background */
bottom:-10px; /* position top triangle */
margin-left:-10px; /* center top triangle */
border-width:10px; /* build top triangle */
border-top:10px solid rgb(46,182,238); /* build top triangle IE6/7/8 */
border-top:10px solid rgba(46,182,238,.8); /* build top triangle modern browsers */
}
.tooltip:hover span { /* reveal tooltip */
opacity:1; /* REVEAL TOOLTIP in modern browsers */
bottom:44px; /* FADE IN/OUT END */
visibility:visible; /* REVEAL TOOLTIP in IE */
}
.tooltip span:hover {
visibility:hidden; /* hide tooltip when moving from link to span in IE */
}
@media screen and (min-device-width:320px) and (max-device-width:768px) {.tooltip span{display:none;}.tooltip:hover span{display:block;} } /* iPad & iPhone simulate :hover */
The HTML
<a class="tooltip"><img src="facebook.png"><span>Facebook</span></a> <a class="tooltip"><img src="twitter.png"><span>Twitter</span></a> <a class="tooltip"><img src="googleplus.png"><span>Google+</span></a> <a class="tooltip"><img src="pinterest.png"><span>Pinterest</span></a> <a class="tooltip"><img src="linkedin.png"><span>Linkedin</span></a> <a class="tooltip"><img src="email.png"><span>Email</span></a> <a class="tooltip"><img src="addtoany.png"><span class="dif">AddToAny</span></a>
