badmanners/badmanners.xyz
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve tooltips with Alpine

Browse source
This commit is contained in:
Bad Manners 2024-09-25 16:56:05 -03:00
parent 4d3ba2776c
commit 6c834dd58a
6 changed files with 101 additions and 154 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/pages/about.astro
View file

@ -3,6 +3,7 @@ import { Image } from "astro:assets";
import BaseLayout from "@layouts/BaseLayout.astro";
import { IconArrowUpRightFromSquare } from "@components/icons";
import { ImageSamStickerJuicebox } from "@assets/images";
import EnhancedTooltips from "@components/EnhancedTooltips.astro";
---
<BaseLayout pageTitle="About me">
@ -65,20 +66,4 @@ import { ImageSamStickerJuicebox } from "@assets/images";
</article>
</BaseLayout>
<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>
<EnhancedTooltips />