Marcofbb Noticias y Artículos Webmasters



Publicidad marcored

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 />

Share

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

Posts Relacionados

Total de Comentarios: 8

Avatar
18/01/2013
5:21 pm

Buena:D

Avatar
NightWing
24/01/2013
12:18 pm

En que parte del código iria?

Avatar
24/01/2013
12:19 pm

Donde lo quieres poner, lo puedes adaptar a Moviepress, Moviescript u otro script

Saludos

Avatar
NightWing
24/01/2013
6:12 pm

Si lo quiere usar para algun tema como por ejemplo cinedoble, donde lo tendria q poner?

Avatar
Jackemathe
28/01/2013
5:01 pm

Funciona para blogger?

    Avatar
    28/01/2013
    7:24 pm

    @Jackemathe Si, funciona en Blogger

Avatar
maicol
31/01/2013
7:34 pm

no entiendo, en que parte lo pego si quiero que aparezca en cada pelicula? tengo moviepress

Avatar
Rikochett
10/04/2014
8:23 am

Genial, incluso se puede implementar en un sistema con base de datos. Gracias, Marco!


Enviar Comentario

(*)

(*)