lixlpixel CSS tooltips

example

after seeing Eric Meyer's pure css popups go to Eric Meyer's pure css popups page to see what i mean i thought about doing tooltips with his code,
but you have to add a relative positioned element to the code to position the tooltip relative to the link.
i just made the link a relative positioned element, that seems to work - at least with Safari.
i'm pretty sure it won't work with every browser, so this is just experimental stuff.
probably you find out how to do it better - good luck.

compatibility

Safari works perfect
Microsoft Internet Explorer for Mac and Win display nothing
(update: Steve Lloyd www.basgetti.com told me:
"If you want this to work on WinIE add the following to your style:
a:hover {font-size: 99%;}
There is a bug in IE that requires you to make some change on hover in order for it to work properly.".
I cannot verify this, as i don't have any Microsoft system around, so if it works now with WinIE, let me know.)
Mozilla Mac displays the tooltip sometimes right and sometimes at odd places
Firefox Mac and Win display the tooltip perfectly

please send an email to lixlpixel@gmail.com if it works with your browser and it's not on the list yet

if you need a tooltip for everyone and don't mind using javascript, have a look at the javascript tooltips Javascript tooltips which stick to the cursor.

the HTML markup


<a href="http://host.com/" class="tip">link <span>tooltip</span></a>

the CSS style


a.tip {
	position: relative;
}

a.tip span {
	display: none;
	position: absolute;
	top: 20px;
	left: -10px;
	width: 125px;
	padding: 5px;
	z-index: 100;
	background: #000;
	color: #fff;
	-moz-border-radius: 5px; /* this works only in camino/firefox */
	-webkit-border-radius: 5px; /* this is just for Safari */
}

a:hover.tip {
	font-size: 99%; /* this is just for IE */
}

a:hover.tip span {
	display: block;
}