feat: replace native titles with global vue tooltips

src/directives/tooltip.js

@@ -0,0 +1,28 @@
+import { showTooltip, hideTooltip, tooltipState } from '../composables/useTooltip'
+
+export const tooltipDirective = {
+  mounted(el, binding) {
+    el._tooltipText = binding.value;
+
+    el.addEventListener('mouseenter', () => showTooltip(el, el._tooltipText));
+    el.addEventListener('mouseleave', hideTooltip);
+    el.addEventListener('focus', () => showTooltip(el, el._tooltipText));
+    el.addEventListener('blur', hideTooltip);
+  },
+  updated(el, binding) {
+    el._tooltipText = binding.value;
+
+    if (tooltipState.isVisible && tooltipState.text !== binding.value) {
+      if (el.matches(':hover') || document.activeElement === el) {
+        showTooltip(el, binding.value);
+      }
+    }
+  },
+  unmounted(el) {
+    el.removeEventListener('mouseenter', () => showTooltip(el, el._tooltipText));
+    el.removeEventListener('mouseleave', hideTooltip);
+    el.removeEventListener('focus', () => showTooltip(el, el._tooltipText));
+    el.removeEventListener('blur', hideTooltip);
+    hideTooltip();
+  }
+};