diff --git a/web/src/lib/components/ui/Tooltip.svelte b/web/src/lib/components/ui/Tooltip.svelte
index c75bc21a7..d476761c2 100644
--- a/web/src/lib/components/ui/Tooltip.svelte
+++ b/web/src/lib/components/ui/Tooltip.svelte
@@ -1,12 +1,13 @@
 <script module lang="ts">
 	import { tv, type VariantProps } from "tailwind-variants";
+	import { popoverAnchorName, popoverSingleton } from "./popover.svelte";
 
 	export const tooltip = tv({
 		slots: {
 			wrapper: "inline-flex",
 			// overflow-visible undoes the UA stylesheet's `overflow: auto` on [popover], which
 			// would otherwise clip the arrow off at the bubble's padding box
-			bubble: "tooltip-bubble fixed inset-auto z-50 m-0 h-fit w-max max-w-64 overflow-visible rounded-sm bg-background-emphasis px-2 pt-1.5 pb-1 typography-paragraph-small text-foreground-inverted shadow-regular"
+			bubble: "tooltip-bubble fixed inset-auto z-50 m-0 h-fit w-max max-w-64 popover-transition overflow-visible rounded-sm bg-background-emphasis px-2 pt-1.5 pb-1 typography-paragraph-small text-foreground-inverted shadow-regular"
 		},
 		variants: {
 			side: {
@@ -26,7 +27,7 @@
 	// hovering a second trigger while one tooltip is up should swap them, not stack them.
 	// `popover="hint"` would do this natively but is not widely supported yet, so keep a
 	// module-level singleton the way Dropdown keeps its groups.
-	let openTooltip: (() => void) | undefined;
+	const tooltipSingleton = popoverSingleton();
 
 	const SKIP_DELAY = 300;
 	let lastHiddenAt = 0;
@@ -70,7 +71,7 @@
 	const bubbleId = $derived(id ?? fallbackId);
 	// anchor-name has to be a custom ident and unique per instance, so it cannot live in the
 	// stylesheet — derive it from the same id the bubble is labelled with
-	const anchorName = $derived(`--tooltip-${bubbleId.replace(/[^a-zA-Z0-9_-]/g, "-")}`);
+	const anchorName = $derived(popoverAnchorName("tooltip", bubbleId));
 
 	let wrapperEl = $state<HTMLElement>();
 	let bubbleEl = $state<HTMLElement>();
@@ -120,14 +121,13 @@
 	const show = () => {
 		if (disabled) return;
 		cancel();
-		if (openTooltip && openTooltip !== hide) openTooltip();
-		openTooltip = hide;
+		tooltipSingleton.claim(hide);
 		bubbleEl?.showPopover();
 	};
 
 	const hide = () => {
 		cancel();
-		if (openTooltip === hide) openTooltip = undefined;
+		tooltipSingleton.release(hide);
 		bubbleEl?.hidePopover();
 	};
 
@@ -216,7 +216,7 @@
 			if (previous) target.setAttribute("aria-describedby", previous);
 			else target.removeAttribute("aria-describedby");
 			cancel();
-			if (openTooltip === hide) openTooltip = undefined;
+			tooltipSingleton.release(hide);
 		};
 	});
 </script>
@@ -318,28 +318,4 @@
 		translate: 0 -50%;
 		clip-path: polygon(0 50%, 100% 0, 100% 100%);
 	}
-
-	.tooltip-bubble {
-		opacity: 0;
-		transition:
-			opacity 100ms ease-out,
-			overlay 100ms allow-discrete,
-			display 100ms allow-discrete;
-	}
-
-	.tooltip-bubble:popover-open {
-		opacity: 1;
-	}
-
-	@starting-style {
-		.tooltip-bubble:popover-open {
-			opacity: 0;
-		}
-	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.tooltip-bubble {
-			transition: none;
-		}
-	}
 </style>
diff --git a/web/src/lib/components/ui/popover.svelte.ts b/web/src/lib/components/ui/popover.svelte.ts
new file mode 100644
index 000000000..3d16c1114
--- /dev/null
+++ b/web/src/lib/components/ui/popover.svelte.ts
@@ -0,0 +1,17 @@
+export function popoverSingleton() {
+	let openHide: (() => void) | undefined;
+
+	return {
+		claim(hide: () => void) {
+			if (openHide && openHide !== hide) openHide();
+			openHide = hide;
+		},
+		release(hide: () => void) {
+			if (openHide === hide) openHide = undefined;
+		}
+	};
+}
+
+export function popoverAnchorName(prefix: string, id: string) {
+	return `--${prefix}-${id.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
+}