If your icon or button has insufficient text or none at all, or it just needs some additional explanation, then you surely need a CSS3 tooltip for it. Why’s that? Because, as they have proved till now, they can help you improve your website usability.
“Do I really need them?”
title attribute is the default additional info you can use. But, the default
title’s can’t be styled. So, if you want something cool, that you can style it as you wish, then a custom CSS3 tooltip is the solution.
How it’s made
The method might be familiar to you, a
relative positioned element who wraps an
absolute positioned one. With this article I’m not trying to reinvent the wheel, I’m just showing you how to create some cool CSS3 tooltips.
Below you can see the proper structure, note the two pointers (made using
:after pseudo-elements ) who overlap:
How the “bordered” pointer is made
Here are the **ingredients **that were used to create them:
Why an anchor?
Just for compatibility reasons. IE6 has a problem with the
:hover pseudo-class used with other elements than anchor.
If you want to use them, and anchors are not an option for you, then you can use this to trigger the tooltips for IE6:
This is a cross-browser solution, it works also on browsers like IE6 and IE7. Although, it looks quite different as we’re talking here about progressive enhancement.
How to solve common IE bugs
The CSS ::before and ::after pseudo-elements syntax