//(c) Alejandro A. Corvatta - 13 Ago 2010
//Clase prototype para el manejo de tips
/*
Ejemplo de uso:
--------------
*/
Tips=Class.create({
initialize:function(){
//barrer todos los elementos de clase 'tips':
var _this=this;
$$(".tips").each(function(elem){
//si el elemento posee atributo title crear instancia de la clase Tips():
if(elem.title && elem.title.length > 0)
_this.setUpTip(elem);
})
}, //initialize
setUpTip:function(elem){
//elem es el elemento que contiene el atributo 'title'
elem=$(elem);
//quitar la clase 'tips' al elemento:
elem.removeClassName('tips');
//guardar en la clase el title del elemento:
this.title=elem.title;
//remover el atributo title del elemento para evitar que se muestre como lo hace x defecto
elem.removeAttribute('title');
if(elem.id){
//el elemento posee id, ver si ya existe el tipBox:
if($(elem.id+'_tip')){ //existe el tipBox, removerlo:
$(elem.id+'_tip').remove();
}
}
else{//si el elemento no posee id, forzarle uno aleatorio:
var tmp_id='tip' + (new Date().getTime());
elem.writeAttribute({id:tmp_id});
}
//crear una caja para el nuevo tip:
this.tipBox=new Element("div");
//ocultar la caja:
this.tipBox.setStyle({visibility:'hidden'});
//agregarle la clase 'tips':
this.tipBox.addClassName('tips');
//indicar el id del tipBox:
this.tipBox.writeAttribute("id", elem.id+'_tip');
//insertar el titulo en la caja:
this.tipBox.insert(this.title);
//mostrar el tip:
this.showTip(elem);
},//setUpTip
showTip:function(elem){
//observar el mouse:
var mouseHandler=this.tipMouseOver; //esto es para no perder el this cuando dispara el handler
elem.stopObserving('mouseover');
elem.observe('mouseover', function(event){mouseHandler(event,elem)});
elem.stopObserving('mousemove');
elem.observe('mousemove', function(event){mouseHandler(event,elem)});
elem.stopObserving('mouseout');
elem.observe('mouseout', this.tipMouseOut.bind(this,elem));
//tambien podria haber sido asi:
// var mouseHandler2=this.tipMouseOut;
// elem.observe('mouseout', function(){mouseHandler2(elem)});
//insertar el box en el body (removerlo previamente si existia):
var body = $(document.body); //para compatibilidad con IE
// body.remove(this.tipBox);
body.insert(this.tipBox);
},
tipMouseOver: function(event, elem){
//obtener el id del elemento:
var elemId=elem.id;
//obtener el id del box:
var tipBoxId=elemId+'_tip';
//hacer visible el box sobre la pos. del mouse+4:
$(tipBoxId).setStyle({position:'absolute',visibility:'visible',left:(4+event.pointerX())+'px',top:(4+event.pointerY())+'px'});
$(tipBoxId).show();
// new Effect.Appear(tipBoxId, { duration: 1.0 });
},//tipMouseOver
tipMouseOut: function(elem){
//obtener el id del elemento:
var elemId=elem.id;
//obtener el id del box:
var tipBoxId=elemId+'_tip';
//ocultar el box:
$(tipBoxId).setStyle({visibility:'hidden'});
//new Effect.Fade(tipBoxId);
}//tipMouseOut
});//Tips class
document.observe("dom:loaded", function(){
Tips=new Tips();
});