Tooltip con Javascript y CSS

0 - , , - 12/05/2005 00:00:00

1.- Debemos crear un estilo para el tooltip:

<style type="text/css">
#toolTipBox {
       display: none;
       padding: 5;
       font-size: 12px;
       border: black solid 1px;
       font-family: verdana;
       position: absolute;
       background-color: #ffd038;
       color: 000000;
}
</style>

2.- Luego tenemos el código de javascript:

<script type="text/javascript">
var theObj="";
function toolTip(text,me) {
       theObj=me;
       theObj.onmousemove=updatePos;
       document.getElementById('toolTipBox').innerHTML=text;
       document.getElementById('toolTipBox').style.display="block";
       window.onscroll=updatePos;
}
function updatePos() {
       var ev=arguments[0]?arguments[0]:event;
       var x=ev.clientX;
       var y=ev.clientY;
       diffX=24;
       diffY=0;
       document.getElementById('toolTipBox').style.top  = y-2+diffY+document.body.scrollTop+ "px";
       document.getElementById('toolTipBox').style.left = x-2+diffX+document.body.scrollLeft+"px";
       theObj.onmouseout=hideMe;
}
function hideMe() {
       document.getElementById('toolTipBox').style.display="none";
}
</script>

3.- Todo lo anterior, lo más apropiado es insertarlo dentro de la etiqueta . Una vez hecho esto unicamento nos resta utilizarlo en las imágenes que lo deseemos.

<div align="center">
<span id="toolTipBox" width="200"></span>
<img src="imagen001.jpg" width="237" height="197" border="0" onmouseover="toolTip('Mensaje que aparecera en el tooltip',this)"></div>

Deja tu comentario

  • El comentario debe estar relacionado con el contenido de la entrada.
  • Comentarios ofensivos, con spam o con lenguaje inapropiado serán eliminados.

captcha