Simple tooltip Javascript y CSS

18/01/2013
5:03 pm
marcofbb

Luego de buscar, un tooltip que no utilice librerías Javascript, llegue a la página Webintenta y cumplió con todo lo que necesitaba, que era un tooltip simple en Javascript y CSS. Pero tenia un error en el cual si el texto era muy largo y/o tenia caracteres especiales no se mostraba el Tooltip, modifique un poco el código y lo comparto con ustedes.

Tooltip

<style type="text/css">
#toolTipBox {
       display: none;
	   border-color: #788794;
       font-family: verdana;
       position: absolute;
       background-color: #788794;
	   -webkit-border-radius: 2px;
	   -moz-border-radius: 2px;
 	   border-radius: 2px;
       color: #fff;
	   font-size: 11px;
	   padding: 4px 12px;
	   text-align: left;
	   width: 400px;
}
</style>
<script type="text/javascript">
var theObj="";
var text="";
function toolTip(me) {
       theObj=me;
	   text = theObj.name;
       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";
	   if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1)
		{
			 document.getElementById('toolTipBox').style.top  = y-2+diffY+document.documentElement.scrollTop+ "px";
		}
       theObj.onmouseout=hideMe;
}
function hideMe() {
       document.getElementById('toolTipBox').style.display="none";
}
</script>
<span id="toolTipBox" width="400"></span>
<a href="#" name='<strong>Batman: El caballero de la noche asciende (2012)</strong><br /><p>Hace ocho a&ntilde;os que Batman desapareci&oacute; en la oscuridad, dejando de ser un h&eacute;roe para convertirse en fugitivo. Al asumir la culpa por la muerte del fiscal del distrito Harvey Dent, el Caballero Oscuro decidi&oacute; sacrificarlo todo por lo que consideraba, al igual que el Comisario Gordon, un bien mayor. La mentira funciona durante un tiempo, ya que la actividad criminal de la ciudad de Gotham se ve aplacada gracias a la dura Ley Dent. Pero todo cambia con la llegada de una astuta gata ladrona, que pretende llevar a cabo un misterioso plan. Sin embargo, mucho m&aacute;s peligrosa es la aparici&oacute;n en escena de Bane, un terrorista enmascarado cuyos despiadados planes para la ciudad obligan a Bruce a regresar de su voluntario exilio.</p>' onmouseover="toolTip(this)">Pasar el mouse por aca</a>
<br />

¿Necesitas ayuda? o ¿Asesoramiento webmaster? Registrate en nuestro foro de consultas

Posts Relacionados

Marcofbb Noticias y Artículos Webmasters

Simple tooltip Javascript y CSS

Total de Comentarios: 8