Tooltip con Javascript y CSS

6 COMENTARIOS - Publicado hace 58 meses - Clasificado en: JAVASCRIPT, TIPS, CSS

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>

Algunas entradas relacionadas:

También te puede interesar:

Bienvenido a Intenta. Has venido desde ; si andabas buscando algo espero que este post satisfaga tus expectativas.

How To Create A Great Web Design CV and Resume?

Cómo crear un sitio de desplazamiento horizontal

Ketchup: tomar notas de reuniones, de la forma más sencilla posible

50 hermosos y efectivos ejemplos de packaging

Envejecer a una persona con Photoshop

MergePDF: servicio para unir archivos PDF

COMENTARIOS

Publicado hace 14 meses
David Bernad - http://www.jadaweb.es

Hola, muchas gracias por el artículo.

Estoy probándolo pero no consigo hacer que funcione, no se lanza el evento onmouseover, ¿sabéis por qué puede ser?

Gracias. Un saludo.