Problema con evento en Ajax

[TrinityCore]

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:

class 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.!