Buenas gente, espero esten bien!
Verán, estoy desarrollando un pequeño
tooltip muy básico para mi sitio que cubra mis justas necesidades y poco a poco lo ire mejorando segun lo requiera.
Bien, el tooltip funciona perfecto cuando se usa en una pagina cargada normalmente, es decir, paginas que se cargan a travez de redirecciones
<a href=''>Link Here</a>
¿Pero que sucede?, es que yo utilizo bastante la carga de documentos mediante la funcion
load() dado a que esto facilita mucho el no tener que crear paginas como para: "cambiar un avatar", entre otras cosas muy comunes en sitios webs.
Ahora bien, el problema es que cuando desde el documento cargado con
load() pongo a la escucha al evento
$("[tooltip]").on("mouseenter") este en dicho documento va de maravilla, pero cuando luego de esto lo uso en la pagina actual del sitio, veo dos cosas:
1- que el tooltip sale totalmente a la izquierda del objeto seleccionado.
2- en el inspector desde la consola veo que se crean dos objetos de tipo
#tooltip
Estoy seguro que esto es devido a que desde el documento que estoy cargando con
load() lo pongo a la escucha del evento
onmouseenter nuevamente y que esto hace que se llame dos veces a la funcion...
Ahora bien, la pregunta es: ¿como evito esto?, ¿como podria hacer yo, para usarlo en un documento cargado con
load() y ademas en la pagina actual sin poner a la escucha al evento mas de una vez?
Aqui dejare mi code completo:
Código Javascript
:
Ver originalclass Tooltip{
constructor(){
return this;
}
create(){
this.listener(); // llamar a listener para poner a la escucha del evento (sirve mas que nada para los documentos que son cargados mediante "load()").
}
listener(){
var self = this;
$("[tooltip]").on("mouseenter", function(e){
$("body").append("<div id='tooltip'><div class='text'>"+$(this).attr('tooltip')+"</div></div>");
self.show(this);
}).on("mouseleave", this.close);
}
show(object){
// Posicion del Tooltip (Al centro del objeto) //
var left = $(object)[0].getBoundingClientRect().left-(($("#tooltip")[0].getBoundingClientRect().width/2)+($(object)[0].getBoundingClientRect().width/2));
var top = $(object)[0].getBoundingClientRect().y+$(object)[0].getBoundingClientRect().height+5;
$("#tooltip").css({
"left":left+"px",
"top":top+"px"
});
$("#tooltip").show();
}
close(){
$("#tooltip").remove();
}
}
var tooltip = new Tooltip();
PD: Si creen que puedo mejorar el code, quisiera que me dijeran sus ideas, gracias y espero que me ayuden.!