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

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;
}