Tooltip.js

$(document).ready(function() {

   const toolTip = {
       delay: 200,
       timer: null,
       active: false,
       

removeDefaultTooltip: function() { $("[title]").hover(function() { const titleValue = $(this).attr("title"); if (titleValue) { // Check if titleValue is defined $(this).attr("custom-title", titleValue).removeAttr("title"); } }); },

       getEl: function() {
           return $(".overlay-popup1");
       },
       
       getContainer: function() {
           return $(".overlay-contents1");
       },

show: function(element) {

   const content = $(element).attr("custom-title");
   if (content) {
       console.log("Content found: ", content);
       this.getContainer().html(this.createPopup(content));
       console.log("Display before changing: " + this.getEl().css("display"));
       this.active = true;
       this.setTimeout();
       console.log("Display after changing: " + this.getEl().css("display"));
   } else {
       console.log("Content not found for element: ", element);
   }

},

       hide: function() {
           this.getEl().css({ display: "none", top: 0, left: 0 });
           this.active = false;
           this.clearTimeout();
       },

       setTimeout: function() {
           this.clearTimeout();
           this.timer = window.setTimeout(() => {
               this.getEl().css("display", "block");
           }, this.delay);
       },

       clearTimeout: function() {
           if (this.timer) {
               window.clearTimeout(this.timer);
           }
       },

       createPopup: function(content) {

return `

${content}

`;

       },

       setPosition: function(event) {
           const winWidth = $(window).width();
           const winHeight = $(window).height();
           const popupWidth = this.getEl().outerWidth();
           const popupHeight = this.getEl().outerHeight();
           const x = event.clientX;
           const y = event.clientY;

           let leftPos = x + popupWidth + 20 > winWidth ? x - popupWidth - 20 + (event.pageX - x) : x + 20 + (event.pageX - x);
           let topPos = y + popupHeight + 20 > winHeight ? winHeight - popupHeight + (event.pageY - y) : y + 20 + (event.pageY - y);
           
           this.getEl().css({ top: topPos, left: leftPos });
       },

       bindEvents: function() {
           const tooltipEl = "[custom-title]";

           $(document).on("mouseenter", tooltipEl, (event) => {
               this.show(event.target);
               this.setPosition(event);
           });

           $(document).on("mouseleave", tooltipEl, () => {
               this.hide();
           });

           $(document).on("mousemove", tooltipEl, (event) => {
               this.setPosition(event);
           });
       },

       init: function() {
           this.removeDefaultTooltip();
           

$("body").append('

');

           this.bindEvents();
       }
   };

   toolTip.init();

});