`tooltip` in web package causes slight interaction delay on iOS Safari

[mimarz]

This was reported on slack: https://designsystemet.slack.com/archives/C05RK9VEGJ0/p1773923640719809

Did some testing and have isolated the problem to our tooltip code in web package.

Example codepen illustrating the problem.

Test on your iOS Safari device by toggling import 'https://esm.run/@digdir/designsystemet-web/tooltip';.
The bug was tested and present, on both physical device and emulator.

[oddvernes]

Claude claims this is the problem:

The culprit is the DELAY_HOVER = 300 ms delay on mouseover. On iOS Safari, tapping an element fires a synthetic mouseover event before the click event. So this code path in handleInterest runs on every tap:

if (type === 'mouseover' && !SOURCE) {
  HOVER_TIMER = setTimeout(handleInterest, DELAY_HOVER, { target }); // 300ms delay
  return;
}

The fix is to skip the hover delay on touch-initiated events. You can detect this by checking if a recent touchstart occurred before the mouseover:

let IS_TOUCH = false;
on(document, 'touchstart', () => { IS_TOUCH = true; }, QUICK_EVENT);

// then in handleInterest:
if (type === 'mouseover' && !SOURCE) {
  if (IS_TOUCH) { IS_TOUCH = false; return; } // skip tooltip on tap
  HOVER_TIMER = setTimeout(handleInterest, DELAY_HOVER, { target });
  return;
}

Or alternatively, only skip the delay (not the tooltip entirely) on touch, so it shows immediately instead of after 300ms. Either way, the mouseover-with-300ms-delay path is what's making every tap on iOS feel like it has a delay.

/end claude

No idea if this is correct but worth checking out 🤷

[Barsnes]

Claude claims this is the problem:

The culprit is the DELAY_HOVER = 300 ms delay on mouseover. On iOS Safari, tapping an element fires a synthetic mouseover event before the click event. So this code path in handleInterest runs on every tap:

if (type === 'mouseover' && !SOURCE) {
  HOVER_TIMER = setTimeout(handleInterest, DELAY_HOVER, { target }); // 300ms delay
  return;
}

The fix is to skip the hover delay on touch-initiated events. You can detect this by checking if a recent touchstart occurred before the mouseover:

let IS_TOUCH = false;
on(document, 'touchstart', () => { IS_TOUCH = true; }, QUICK_EVENT);

// then in handleInterest:
if (type === 'mouseover' && !SOURCE) {
  if (IS_TOUCH) { IS_TOUCH = false; return; } // skip tooltip on tap
  HOVER_TIMER = setTimeout(handleInterest, DELAY_HOVER, { target });
  return;
}

Or alternatively, only skip the delay (not the tooltip entirely) on touch, so it shows immediately instead of after 300ms. Either way, the mouseover-with-300ms-delay path is what's making every tap on iOS feel like it has a delay.

/end claude

No idea if this is correct but worth checking out 🤷

This seems like a reasonable guess. I like the idea of not having a timer on touch events. You'd want tooltips to show up as fast as possible on mobile anyways