Tutorial: Simple Cross-browser tooltip with CSS

We see tooltip almost everyday on the web. And most of us know there are a lot of way of doing this. Personally, i think the easily way of accomplished this is by using CSS. Although there are disadvantage and advantages of doing this which we will discuss later. Nonetheless, it is one of the most easiest way of accomplished a tooltip. (although the MOST easily way is to just use a title attribute in the tag without any additional code)

The Concept

This method neglect the use of 'title' and apply 'span' tag instead. We know that span tag won't add additional break to a text (which is what we want!) and is usually used to highlight text on a particular paragraph. Therefore, span tag can be used perfectly to substitute title attribute although it cannot totally replace it. So what we do here is by placing the span tag within the anchor tag and style the span tag with a absolute position while the anchor will have relative position. This way, the span tag can have any position away from the anchor tag which provides a tooltip like position. The last missing puzzle will be using an pseudo class to perform a CSS hover on the anchor for displaying and hiding the tooltip. That's it.

The Code

The concept illustrate the basic use of this method. We can further enhance it to cater for more visual effect such as adding additional image on the tooltip.

The HTML

	<a href="#"> Mouse over me to see what i have to say!
	<span class='tooltip'>
	<span class='top'></span>
	<span class='middle'>this is a testing site to demonstrate how simple a tooltip be build without affecting the efficiency of the overall site. Only pure CSS implementation is required. No additional JavaScript is needed actually. Well, unless you want to do something different like dragging your tooltip around a particular images, you may consider using a simple jQuery or JavaScript code to accomplish that.</span>
	<span class='bottom'></span>
	</span>
	</a>

We will have an anchor and inside the anchor we will have two things, the link message and the tooltip. The link message is 'Mouse over me to see what i have to say!' which is quite obvious and the span tag will locate next to it. Actually we only need one span tag if we are doing a simple border tooltip without images but we want to enhance overall look of the tooltip so we need a few nested span within the main span tag as shown above.

The CSS

a {
    position:relative;
    color:#3CA3FF;
    font-weight:bold;
    text-decoration:none;
}
a  span{ display: none; }
a:hover{ 
color: #aaaaff; 
background:;
}
a:hover span.tooltip{
    display:block;
    position:absolute;
    top:0px; left:0;
	padding: 15px 0 0 0;
	width:200px;
	color: #993300;
    text-align: center;
	filter: alpha(opacity:70);
	KHTMLOpacity: 0.70;
	MozOpacity: 0.70;
	opacity: 0.70;
}
a:hover span.top{
	display: block;
	padding: 55px 8px 0;
    background: url(../images/main_image.png) no-repeat top;
}
a:hover span.middle{ 
	display: block;
	padding: 0 8px; 
	background: url(../images/content_image.png) repeat bottom; 
}
a:hover span.bottom{
	display: block;
	padding:3px 8px 40px;
    background: url(../images/main_image.png) no-repeat bottom;
}

I will explain the CSS code above in point form

'a {...': We declare the basic of the anchor tag. eg. color, decoration, bold, position but the key is position relative as stated on the concept section
'a span{...': the tooltip should be hidden at first
'a:hover{...': We need to set the hover z-index and a small hack 'background:;' for ie.
'a:hover span.tooltip{..': this is the tooltip and the declaration of important are 'width', 'position' and 'display'. Width is the size of the image, position is describe on the concept section and display is block because we need to make the tooltip available when hover. Others should be simple to understand
'a:hover span.top{..': the top part of the image to be display
'a:hover span.middle{ ..': the image part where it will be scretched
'a:hover span.bottom{..': the bottom part of the image to be display

The reason why it is 'a:hover span...' for the image declaration was because we want the hover to be maintained when our mouse move on top of the tooltip instead of just having the normal 'mouseover' on the anchor tag which will make our tooltip display whenever our mouse move away from the anchor on top of the tooltip. If you just want a simple tooltip, remove the 'top', 'bottom' and 'middle' from the above declaration and give border to 'tooltip' (you may want to remove the opacity declaration for close browser) which will easily give you a simple tooltip in a few second but the visual part will be lost.

The Advantages

Here are some of the advantages of using this method,

Efficient compare to JavaScript method
Independent. User can turn off JavaScript and it will still work
Quick and dirty. A few lines of CSS and we have our tooltip
No redundency. We will be using CSS even with JavaScript
Etc.

The Disadvantages

Here are some of the disadvantages,

Bad for SEO. search engine spider look at title and also the use of span within an anchor is not a standard practice
Required certain CSS hack for it to work at lower browser (not really a disadvantage but consider as a problem)
The tooltip cannot follow the mouse wherever it goes.(image tooltip)
If this method has a title on it, it will display both the tooltip and the default title altogether. Bad
Etc.

The Demo

Here are the files and demo for simple cross-browser tooltip with CSS