Event Delegation

What potential issue exists in this tooltip delegation?

document.addEventListener('mouseover', e => {
  const target = e.target.closest('[data-tooltip]');
  if (!target) return;
  
  const tooltip = document.createElement('div');
  tooltip.textContent = target.dataset.tooltip;
  tooltip.className = 'tooltip';
  target.appendChild(tooltip);
  
  target.addEventListener('mouseout', () => {
    tooltip.remove();
  }, { once: true });
}, { passive: true });

Memory leaks
Event bubbling problems
Frequent DOM mutations
This tooltip implementation, while functional, suffers from frequent DOM mutations by creating and removing tooltip elements on every mouseover. Better approaches would include: 1) Reusing a single tooltip element, 2) Using CSS for positioning, 3) Managing state without DOM changes, 4) Handling edge cases like rapid mouse movements. While event delegation is appropriate here, the implementation could be optimized to reduce DOM operations and improve performance.
Incorrect event type

Next Question (14/20)