Muy bien
Chalchis vamos a ponerte un ejemplo, espero que lo puedas adaptar a lo que necesitas y a tu gusto.
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Bubble Tooltips</title>
<meta content="CSS Tooltips">
<script type="text/javascript">
function bubbleIt(x){
var s=document.getElementById(x);
s.className="tm";
}
function unBubbleIt(x){
var s=document.getElementById(x);
s.className="ts";
}
</script>
<style type="text/css">
body{font: .75em Arial,sans-serif; background: #FFFFFF; color: #333333}
div#container{width: 500px; margin:0 auto}
h1{ color: #F60; margin: 1em 0 0; letter-spacing: -2px; }
p{margin: 0 0 1.7em; }
/*---------- bubble tooltip -----------*/
.ts{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
.ts span{ display: none; }
/*background:; ie hack, something must be changed in a for ie to execute it*/
.tm{ z-index:25; color: #aaaaff; background:;}
.tm span.tooltip{
display:block;
position:absolute;
top:0px; left:160px;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
.tm span.top{
display: block;
padding: 30px 8px 0;
background: url(bubble.gif) no-repeat top;
}
.tm span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px;
background: url(bubble_filler.gif) repeat bottom;
}
.tm span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(bubble.gif) no-repeat bottom;
}
</style>
</head>
<body>
<div id="caja" class="ts"><input type="text" name="caja" value="" onfocus="bubbleIt('caja')" onblur="unBubbleIt('caja')" /><span class="tooltip"><span class="top"></span><span class="middle">Tooltip de la caja 1!</span><span class="bottom"></span></span></div>
<div id="box" class="ts"><input type="text" name="box" value="" onfocus="bubbleIt('box')" onblur="unBubbleIt('box')" /><span class="tooltip"><span class="top"></span><span class="middle">Tooltip de la caja 2!</span><span class="bottom"></span></span></div>
<div id="area" class="ts"><input type="text" name="area" value="" onfocus="bubbleIt('area')" onblur="unBubbleIt('area')" /><span class="tooltip"><span class="top"></span><span class="middle">Tooltip de la caja 3!</span><span class="bottom"></span></span></div>
</body>
</html>
Es el mismo codigo, unicamente se elimina del CSS la referencia al vinculo'a' y se coloca como un estilo general.
El Javascript unicamente intercambiaria los estilos .ts y .tm lo demas es puro CSS.
Saludos!!
