Performance issue on scroll

[ThinhVu]

https://www.youtube.com/watch?v=hbzBKVjM3QY

For some reasons, method $_removeEventListeners doesn't call on $_applyHide. The result is window.addEventListener('scroll') is loaded up with a ton of 'scroll' handlers (at 01:01 in the video above).

Setting positioningDisabled doesn't help, it creates another bug.

I'm hoping you guys for an appropriate fix.

[Knogobert]

We ended up creating our own lil' helper for speeding up large pages with many tooltips (tables with many tooltipped cells of rows in our case). The drawback is that it's currently only made for one event handler.

For example: @mouseover / @mouseout or @click / v-on-click-outside

Sharing it here if it helps anybody.

performantTooltip.js

import { createTooltip as floatingCreateTooltip, destroyTooltip as floatingDestroyTooltip, hideAllPoppers } from 'floating-vue';

let tooltips = new WeakMap();

export function createTooltip(el, settings) {
  if (Array.isArray(el)) el = el[0];
  if (!el) return null;
  if (tooltips.has(el)) return tooltips.get(el);
  const tooltip = floatingCreateTooltip(el, {
    triggers: [],
    content: settings?.content ?? settings,
    delay: 0,
    ...settings,
  });
  tooltips.set(el, tooltip);
  tooltip.show();
  return tooltip;
}

export function destroyTooltip(el, transitionTime = 400) {
  if (Array.isArray(el)) el = el[0];
  const tooltip = tooltips.get(el);
  if (!tooltip) return;
  tooltip.hide();
  setTimeout(() => {
    floatingDestroyTooltip(el);
    tooltips.delete(el);
  }, transitionTime);
}

export function destroyAllTooltips() {
  hideAllPoppers();
  tooltips = new WeakMap();
}

---

component.vue

<template>
  <div
    ref="myEl"
    @mouseover="createTooltip($refs?.myEl, { content: 'tootylip' })"
    @mouseleave="destroyTooltip($refs?.myEl)"
  />
</template>