CSS3 tooltips

CSS3 tooltips: "
If your icon or button has insufficient text or none at all, or it just needs some additional explanation, then you surely need a tooltip for it. Why’s that? Because, as they have proved till now, tooltips can help you improve your website usability.

Having said that, in this article you’ll learn how to create your own CSS tooltips: no images, no javascript.





View demo

“Do I need CSS tooltips?”

The HTML title attribute is the default tooltip you can use. But, default tooltips can’t be styled. If you want a cool tooltip, one that you can style it as you wish, then a custom CSS tooltip is the solution.

How is 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 tooltip structure, note the two pointers (made using :before and :after pseudo-elements ) who overlap:



How the “bordered” pointer is made

Here are the ingredients that were used to create the tooltips:

• Gradients
• Box shadow
• Pseudo-elements

HTML

<a href="#" class="tooltip">
your text
<span>Your tooltip description</span>
</a>

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 these tooltips, and anchors are not an option for you, then you can use this to trigger the tooltip for IE6:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function() {
if ($.browser.msie && $.browser.version.substr(0,1)<7)
{
$('.tooltip').mouseover(function(){
$(this).children('span').show();
}).mouseout(function(){
$(this).children('span').hide();
})
}
});
</script>

CSS

.tooltip
{
position: relative;
background: #eaeaea;
cursor: help;
display: inline-block;
text-decoration: none;
color: #222;
outline: none;
}

.tooltip span
{
visibility: hidden;
position: absolute;
bottom: 30px;
left: 50%;
z-index: 999;
width: 230px;
margin-left: -127px;
padding: 10px;
border: 2px solid #ccc;
opacity: .9;
background-color: #ddd;
background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
-moz-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

.tooltip:hover
{
border: 0; /* IE6 fix */
}

.tooltip:hover span
{
visibility: visible;
}

.tooltip span:before,
.tooltip span:after
{
content: '';
position: absolute;
z-index: 1000;
bottom: -7px;
left: 50%;
margin-left: -8px;
border-top: 8px solid #ddd;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 0;
}

.tooltip span:before
{
border-top-color: #ccc;
bottom: -8px;
}

View demo

Browser support

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.

"