Blogging for SEO

Start with this

<a href="#">Title <span>Tooltip</span></a>

Anchor is given position:relative and span is placed absolute and
styled separately. We initially hide the span element and show it only
when user hovers the link (using a:hover span selector). 

Here's the css:

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:-2.2em;
	left:.5em;
	background:#fffcd1;
	border:1px solid #444;
	color:#444;
	padding:1px 5px;
	z-index:10;
	}

Click here to see it in action

—————-
Listening to: Chevelle - Panic Prone
via FoxyTunes

This entry was posted on Wednesday, April 30th, 2008 at 9:43 am and is filed under Designs. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.