<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style>.info{ position:relative; /*this is the key*/ z-index:24; background-color:#ccc; color:#000; text-decoration:none}.info:hover{z-index:25; background-color:#ff0}.info span{display: none}.info:hover span{ /*the span will display just on :hover state*/ display:block; position:absolute; top:2em; left:2em; width:15em; border:1px solid #0cf; background-color:#cff; color:#000; text-align: center} </style></head><body>What is a tooltip? <span class="info" href="#">This is a tooltip <span>an aiding text that appears just when you roll on with the mouse</span></span>. The basic <span class="info" href="#">This is a tooltip <span>an aiding text that appears just when you roll on with the mouse</span></span>idea comes <a href="#">from</a> Eric Meyer's pure css popups</body></html>