Add Tippy.js tooltips to focusable elements

src/layouts/GalleryLayout.astro

@@ -143,6 +143,7 @@ const isCurrentRoute = (path: string) =>
     </main>
   </div>
 </BaseLayout>
+
 <style>
   nav ul li a,
   nav ul li button {
@@ -159,3 +160,17 @@ const isCurrentRoute = (path: string) =>
     height: 1ex;
   }
 </style>
+
+<script>
+  import tippy from "tippy.js";
+  import "tippy.js/dist/tippy.css";
+
+  const clipboardItems = document.querySelectorAll<HTMLElement>("[data-clipboard]");
+
+  tippy(clipboardItems, {
+    content: (el) => (el as HTMLElement).dataset.clipboard!,
+    theme: "bm",
+  });
+
+  clipboardItems.forEach((el) => el.removeAttribute("title"));
+</script>