// tooltip.js

function createTooltip(button, tooltipText) {
    const tooltip = document.createElement('div');
    const arrow = document.createElement('div');
    arrow.id = 'arrow';
    arrow.setAttribute('data-popper-arrow', '');
    
    tooltip.id = 'tooltip';
    tooltip.textContent = tooltipText;
    tooltip.appendChild(arrow);
    document.body.appendChild(tooltip);
  
    const popperInstance = Popper.createPopper(button, tooltip, {
      modifiers: [
        {
          name: 'offset',
          options: {
            offset: [0, 8],
          },
        },
      ],
    });
  
    function show() {
      tooltip.setAttribute('data-show', '');
  
      popperInstance.setOptions((options) => ({
        ...options,
        modifiers: [
          ...options.modifiers,
          { name: 'eventListeners', enabled: true },
        ],
      }));
  
      popperInstance.update();
    }
  
    function hide() {
      tooltip.removeAttribute('data-show');
  
      popperInstance.setOptions((options) => ({
        ...options,
        modifiers: [
          ...options.modifiers,
          { name: 'eventListeners', enabled: false },
        ],
      }));
    }
  
    const showEvents = ['mouseenter', 'focus'];
    const hideEvents = ['mouseleave', 'blur'];
  
    showEvents.forEach((event) => {
      button.addEventListener(event, show);
    });
  
    hideEvents.forEach((event) => {
      button.addEventListener(event, hide);
    });
  
    return {
      destroy: () => {
        tooltip.remove();
        popperInstance.destroy();
        showEvents.forEach((event) => {
            button.removeEventListener(event, show);
          });
        
          hideEvents.forEach((event) => {
            button.removeEventListener(event, hide);
          });
      },
    };
  }
  
  // Expose the function as a global variable
  window.createTooltip = createTooltip;