frontend/src/tooltip.ts

// Tooltip global (hover) — puerto TS de js/tooltip.js. Sin cambios de comportamiento.

const burbuja = document.createElement('div');
burbuja.id = 'tooltip-global';
document.body.appendChild(burbuja);

const MARGEN = 8;

const posicionar = (el: HTMLElement): void => {
  const rect = el.getBoundingClientRect();
  const enFooter = el.closest('.nav-inferior') !== null;

  burbuja.style.left = '';
  burbuja.style.right = '';

  let top: number;
  let left: number;

  if (enFooter) {
    top = rect.top - burbuja.offsetHeight - MARGEN;
  } else {
    top = rect.bottom + MARGEN;
  }

  left = rect.left + rect.width / 2 - burbuja.offsetWidth / 2;

  const margenLateral = 6;
  if (left < margenLateral) left = margenLateral;
  if (left + burbuja.offsetWidth > window.innerWidth - margenLateral) {
    left = window.innerWidth - burbuja.offsetWidth - margenLateral;
  }

  burbuja.style.top = `${top + window.scrollY}px`;
  burbuja.style.left = `${left}px`;
};

let temporizador: ReturnType<typeof setTimeout>;

document.addEventListener('mouseover', (e) => {
  const el = (e.target as Element | null)?.closest<HTMLElement>('[data-tooltip]');
  if (!el) return;

  clearTimeout(temporizador);
  temporizador = setTimeout(() => {
    burbuja.textContent = el.dataset.tooltip ?? '';
    burbuja.classList.add('visible');
    posicionar(el);
  }, 400);
});

document.addEventListener('mouseout', (e) => {
  const el = (e.target as Element | null)?.closest('[data-tooltip]');
  if (!el) return;

  clearTimeout(temporizador);
  burbuja.classList.remove('visible');
});

document.addEventListener('click', () => {
  clearTimeout(temporizador);
  burbuja.classList.remove('visible');
});