Fix incorrect tooltip position after window resize

This commit fixes an issue where the tooltip position becomes inaccurate
after resizing the window.

The solution uses `autoUpdate` functionality of `floating-ui` to update
the position automatically on resize events. This function depends on
browser APIs: `IntersectionObserver` and `ResizeObserver`. The official
documentation recommends polyfilling those to support old browsers.

Polyfilling `ResizeObserver` is already part of the codebase, used by
`SizeObserver.vue`. This commit refactors polyfill logic to be reusable
across different components, and reuses it on `TooltipWrapper.vue`.

Polyfilling `IntersectionObserver` is ignored due to this API being
older and more widely supported.

src/presentation/components/Shared/TooltipWrapper.vue

@@ -24,9 +24,10 @@
 
 <script lang="ts">
 import {
-  useFloating, arrow, shift, flip, Placement, offset, Side, Coords,
+  useFloating, arrow, shift, flip, Placement, offset, Side, Coords, autoUpdate,
 } from '@floating-ui/vue';
 import { defineComponent, ref, computed } from 'vue';
+import { useResizeObserverPolyfill } from '@/presentation/components/Shared/Hooks/UseResizeObserverPolyfill';
 import type { CSSProperties } from 'vue/types/jsx'; // In Vue 3.0 import from 'vue'
 
 const GAP_BETWEEN_TOOLTIP_AND_TRIGGER_IN_PX = 2;
@@ -40,6 +41,8 @@ export default defineComponent({
     const arrowElement = ref<HTMLElement | undefined>();
     const placement = ref<Placement>('top');
 
+    useResizeObserverPolyfill();
+
     const { floatingStyles, middlewareData } = useFloating(
       triggeringElement,
       tooltipDisplayElement,
@@ -56,6 +59,7 @@ export default defineComponent({
           flip(),
           arrow({ element: arrowElement }),
         ],
+        whileElementsMounted: autoUpdate,
       },
     );
     const arrowStyles = computed<CSSProperties>(() => {