From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.
In today’s tip we’ll show you how to create some simple, animated tooltips using CSS transitions and the pseudo-classes :before and :after.
The idea is to have a list with links or in our case, social icons, that reveal a little tooltip on hover.
The unordered list will look like this:
<ul class="tt-wrapper"> <li><a class="tt-gplus" href="#"><span>Google Plus</span></a></li> <li><a class="tt-twitter" href="#"><span>Twitter</span></a></li> <li><a class="tt-dribbble" href="#"><span>Dribbble</span></a></li> <li><a class="tt-facebook" href="#"><span>Facebook</span></a></li> <li><a class="tt-linkedin" href="#"><span>LinkedIn</span></a></li> <li><a class="tt-forrst" href="#"><span>Forrst</span></a></li> </ul>
The list elements will be floating left and the anchors will have the following style:
.tt-wrapper li a{ display: block; width: 68px; height: 70px; margin: 0 2px; outline: none; background: transparent url(../images/icons.png) no-repeat top left; position: relative; }
Each anchor will have a different background position for the background image:
.tt-wrapper li .tt-gplus{ background-position: 0px 0px; } .tt-wrapper li .tt-twitter{ background-position: -68px 0px; } .tt-wrapper li .tt-dribbble{ background-position: -136px 0px; } .tt-wrapper li .tt-facebook{ background-position: -204px 0px; } .tt-wrapper li .tt-linkedin{ background-position: -272px 0px; } .tt-wrapper li .tt-forrst{ background-position: -340px 0px; }
The span will work as our tooltip and we will “hide” it by setting its initial opacity to 0. The effect I want to share with you is the tooltip fading in and appearing from the top, so we will give it a bottom of 100px, placing it above the anchor:
.tt-wrapper li a span{ width: 100px; height: auto; line-height: 20px; padding: 10px; left: 50%; margin-left: -64px; font-family: 'Alegreya SC', Georgia, serif; font-weight: 400; font-style: italic; font-size: 14px; color: #719DAB; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); text-align: center; border: 4px solid #fff; background: rgba(255,255,255,0.3); text-indent: 0px; border-radius: 5px; position: absolute; pointer-events: none; bottom: 100px; opacity: 0; box-shadow: 1px 1px 2px rgba(0,0,0,0.1); transition: all 0.3s ease-in-out; }
Since we will make the tooltip appear on hover over the anchor (and the span counts as part of the anchor) the tooltip will also appear when hovering over the area above the anchor (the span is still there, it’s just the 0 opacity that makes it invisible).
For the little pointer, we will style the pseudo-elements :before and :after. We will style them the same way and create a triangle by using transparent left and right borders. The :before pseudo-element will serve as a shadow for the :after pseudo-element, so we’ll give it a black rgba value with a low opacity:
.tt-wrapper li a span:before, .tt-wrapper li a span:after{ content: ''; position: absolute; bottom: -15px; left: 50%; margin-left: -9px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid rgba(0,0,0,0.1); }
The :after pseudo-element will be placed a pixel away and we’ll make it white, just like the border of the tooltip itself:
.tt-wrapper li a span:after{ bottom: -14px; margin-left: -10px; border-top: 10px solid #fff; }
So, on hover, we will make the span move from the top and fade in:
.tt-wrapper li a:hover span{ opacity: 0.9; bottom: 70px; }
And voilร ! Very simple animated tooltips! In the second demo, you can see an alternative style for the tooltip (a funny circle) which scales up from the anchor and in the third demo the tooltips are rotated. The forth demo shows another neat effect.
The beautiful social icons in the demo are by Emir Ayouni (growcase.com).
I hope you enjoyed this little effect and find it useful!
Needless to say, this will only work in browsers that support pseudo-elements and CSS transitions.
Image Credits:
Abstract Vector Image By Vectorportal.com
nice … ๐
not bad
I like demo4 ๐
Love it !! Thank You.
sleek and nice!!! i’m loving it
wow… very cool and simple all samples
Very nice, but I need to ask, how to generate RGBA fastly? do you use photoshop? or generated by your editor?
I think the tooltips should not be triggered when hovering outside the icons. For supported browsers you could add
pointer-events: none
to the.tt-wrapper li a span
selector to prevent that.Otherwise, they look very nice.
thanks Catalin, it’s already updated ๐
Demo 4 doesn’t work on Safari 5.1 on Mac?
Fixed
Thanks Mary Lou
Nice, but requires more contrast.
How can I make the TOOLTIP “touchable”?!
Like use it as an dropdown-thingie?! ๐
nice post :))) loving css3
Nice job, Thank you!
In Chrome, demo #4 displays a quick blue flash before you hover over the element. Not sure if that’s a bug or a feature ๐
loved the 4th demo!! Magical…
thanks,so great …
Nice effect, but it doesn’t degrade very well in IE8 and IE7, shame
Very well?. It basically doesn’t work so I find this awesome but not useful.
Amazing.
Love how simple it is to change a few attributes and create a totally new animation effect.
I simply changed the following css from demo 4 which created a neat spinning/depth effect.
-moz-transform: translate(35px) rotate(180deg) scale(0.5); -moz-transition: all 0.5s ease-in-out;
Thanks for the tutorial. I liked the second demo the best. Bookmarked and tweeted.
I’ll steal it! Its great! My e.g.
Very nice, great
Hello,
THanks for the tip, works great !
Just one thing, can anyone tell me why this point appears ? —> http://www.savin-it.com/di-H0PF.png
Thank you in advance.
Try using list-style-type: none; on the LI elements in the CSS. That should remove the dots for you ๐
Although the effect is neat, there’s a major feature missing: the ability to enjoy it when you are a (sighted) keyboard-only user. Indeed you are able to tab through the icons, but you have no visual cues of where the focus currently is. Plus, you don’t get the benefit of the tooltips, since they are not triggered.
Both could be solved easily, though:
– do not suppress the outline (via the
outline:none
declaration). Outlines are extremely useful, modern browsers handle them very well, so, please, just leave them alone. And if you want, you can style them at will– use the :focus pseudo-class whenever you use :hover. Simple, and it does the job perfectly well.
For more info about :focus, check Nomensa’s blog.
With these two little changes, you’ll have a much better product, that is: more universally usable than before.
If it’s of any interest to you and your readers, I have explained this keyboard issue more extensively on my blog: Little action, great effects: improving a CSS-based tooltip in 18 seconds.
Great !!!!
Tnks for sharing ! ๐
Very nice tutorial!:) Pozdrawiam z polski:)!!
I’ve got problem. I paste this “Style2” css code in “Add custom CSS” on my page and it doesn’t work. Did I do something not right?
demo number 3 make someone around the head ๐
WOW new pic by master Mary Lou…hohohoho ?
Really an excellent how to article about creating animated tool tips. Tool tips are very important in a good web design.Thanks for sharing the code as well.
Regards,
Amelie Wakelin
thank you I learned some new stuffs, but, how should we do? I can’t garanty that it will work on all web browsers, I don’t really know css 3 but do you think that we should start using it at a large scall, for busness websites for exemples?
Thank you for the great demos and tutorials! So I have one problem troubled. If I move the mouse over and over again using demo2 ~ 4 on Mac Chrome17, the screen will go black-out for a moment when “on mouse over” and “on mouse out”. This does not happen on Safari5.1.2, Opera11.61 and FireFox10. What action is how should I do? Also, do you think this cause is what?
Oh, this is amazing…
I like this tool tips tutorial. But i don’t know how to install this in a wordpress blog. Please help me to implement this in my blog.
Wow, your demo site works amazing, I don’t know how you can archive it with only CSS3, or does it need jQuery in order to work?
I like this tool tips tutorial!!! but how to solve the problems with internet explorer??
Nice one lovely anim with great style
Simply great ! surely gonna use this. Thanks Mary ๐
Merveilleux! Great! I love the style of the different tooltips. ๐
Sucks that it looks like crap in IE 8. Beuatiful in chrome
This is totally awesome! ๐
This is stupendous! Total Package of Awesomeness ๐
Any idea on how I can get this work on the ipad?
fantastic tooltip, thank you for sharing this! Any idea on how to make it look nice on IE8? Stupid IE again, never displays anything correctly, it makes the hover boxes appear visible even when you arent hovering over the icon.
god tuto
I like this, very good job !!
But it needs a float left isn’ t it ?
I Hate Internet Explorer!
Thanks for the tip. Does it work if the links are words instead of background images?
Thank you, so awesome tooltip. Btw how can I use this with larger text?
Thanks for the tip. Does it work if the links are words instead of background images?
nice one.