Tooltip en Movimiento: CSS y JavaScript

   Una de las cosas que mas busco cuando desarrollo un sitio es velocidad, precisamente una de las cosas que mayor la quita es el tooltip, y mas si se trata de un efecto visual de alto nivel. Pero ¿cómo puedo aumentar el rendimiento? Simple, desde hace algún tiempo que conocemos la existencia del CSS3 y las bondades que este nos provee.

   Hace algún tiempo que implemento el tooltip con efecto fade "hotspot" que vi en vagabundia, pero (a mi gusto) hay un pequeño problema. A pesar de ser muy rápido y todo lo demás, utiliza imágenes para los bordes, por lo que nos tardamos un poco en mostrar el efecto como se debe, pero para eso entonces tenemos la solución. Cambiamos un poco el estilo, utilizando CSS3 para crear un borde, entonces quedaría algo así:

#tt { position:absolute;display:block; }
#tttop { display:block;overflow:hidden; }
#ttbot { display:block;overflow:hidden; }
#ttcont {
  display:block;
  padding:5px 10px 5px 10px;
  margin-left:8px;
  background:#444;
  color:#FFF;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

   El Script:

var tooltip=function(){
 var id = 'tt';
 var top = 3;
 var left = 3;
 var maxw = 300;
 var speed = 10;
 var timer = 20;
 var endalpha = 95;
 var alpha = 0;
 var tt,t,c,b,h;
 var ie = document.all ? true : false;
 return{
  show:function(v,w){
   if(tt == null){
    tt = document.createElement('div');
    tt.setAttribute('id',id);
    t = document.createElement('div');
    t.setAttribute('id',id + 'top');
    c = document.createElement('div');
    c.setAttribute('id',id + 'cont');
    b = document.createElement('div');
    b.setAttribute('id',id + 'bot');
    tt.appendChild(t);
    tt.appendChild(c);
    tt.appendChild(b);
    document.body.appendChild(tt);
    tt.style.opacity = 0;
    tt.style.filter = 'alpha(opacity=0)';
    document.onmousemove = this.pos;
   }
   tt.style.display = 'block';
   c.innerHTML = v;
   tt.style.width = w ? w + 'px' : 'auto';
   if(!w && ie){
    t.style.display = 'none';
    b.style.display = 'none';
    tt.style.width = tt.offsetWidth;
    t.style.display = 'block';
    b.style.display = 'block';
   }
   if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}
   h = parseInt(tt.offsetHeight) + top;
   clearInterval(tt.timer);
   tt.timer = setInterval(function(){tooltip.fade(1)},timer);
  },
  pos:function(e){
   var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
   var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
   tt.style.top = (u - h) + 'px';
   tt.style.left = (l + left) + 'px';
  },
  fade:function(d){
   var a = alpha;
   if((a != endalpha && d == 1) || (a != 0 && d == -1)){
    var i = speed;
    if(endalpha - a < speed && d == 1){
     i = endalpha - a;
    }else if(alpha < speed && d == -1){
     i = a;
    }
    alpha = a + (i * d);
    tt.style.opacity = alpha * .01;
    tt.style.filter = 'alpha(opacity=' + alpha + ')';
   }else{
    clearInterval(tt.timer);
    if(d == -1){tt.style.display = 'none'}
   }
  },
  hide:function(){
   clearInterval(tt.timer);
   tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
  }
 };
}();

   Ya solo nos queda implementarlo, la forma de utilizarlo es la siguiente:
<span onmouseover="tooltip.show('EL TEXTO DEL TOOLTIP');" onmouseout="tooltip.hide();">El texto normal</span>

   Y tendremos como resultado algo como esto:

Pasa el mouse para ver el ToolTip

   De cualquier forma en la entrada de vagabundia esta todo bien explicado.

Recibe notificaciones por correo