Improve tooltips with Alpine

src/components/EnhancedTooltips.astro

@@ -0,0 +1,21 @@
+---
+
+---
+
+<script>
+  import tippy from "tippy.js";
+  import "tippy.js/dist/tippy.css";
+
+  const initTooltips = () => {
+    const tooltipItems = document.querySelectorAll<HTMLElement>("[title][data-tooltip]");
+    tooltipItems.forEach((el) => el.setAttribute("data-tooltip", el.title));
+    tippy(tooltipItems, {
+      content: (el) => (el as HTMLElement).dataset.tooltip!,
+      theme: "bm",
+    });
+    tooltipItems.forEach((el) => el.removeAttribute("title"));
+  };
+
+  document.addEventListener("astro:page-load", initTooltips);
+  initTooltips();
+</script>