Well I have found a way to achieve this by just using CSS! Yep, just CSS. This is done by having a span that is hidden inside your ‘a’ element. Then on hover of your ‘a’ you just simply show the content of the span. All you then have left to do is position your span on your page and style it up however you like. Below is the code to achieve this…

Your ‘a’ element needs to look like this :

Title This is the tooltip

And the style needs to look something like this:

a {
	z-index:10;
}
a:hover {
	position:relative;
	z-index:100;
}
a span {
	display:none;
}
a:hover span {
	display:block;
	position:absolute;
	float:left;
	white-space:nowrap;
	top:.5em;
	left:.5em;
	background:#fffcd1;
	border:1px solid #444;
	color:#444;
	padding:1px 5px;
	z-index:10;
}

CSS Tooltip

Although the negative to using this technique is that Google would see this as anchor text so it would associate this with the link. This could potentially water down your keywords on the page this is running on! So as with all techniques this needs to be used with consideration to whether it is the right solution for the situation?

Well guys I hope this helps solve a problem as it really did help me out.

PS – Please be nice as this is my first post on Six Crayons!

Toodles…