feat(frontend): replace non-working bootstrap tooltips with tippy.js

Foxnouns.Frontend/src/app.scss

@@ -29,6 +29,15 @@
 	white-space: pre-line;
 }
 
+// Make tippy tooltips look like bootstrap's
+.tippy-box {
+	padding: bootstrap.$spacer * 0.25 bootstrap.$spacer * 0.5;
+	opacity: 0.9;
+	color: var(--bs-body-bg);
+	background-color: var(--bs-emphasis-color);
+	border-radius: var(--bs-border-radius);
+}
+
 // Add breakpoint-dependent w-{size} utilities
 // Source: https://stackoverflow.com/questions/47760132/any-way-to-get-breakpoint-specific-width-classes
 @each $breakpoint in map-keys(bootstrap.$grid-breakpoints) {

Foxnouns.Frontend/src/lib/components/StatusIcon.svelte

@@ -1,17 +1,14 @@
 <script lang="ts">
-	import { Icon, Tooltip } from "@sveltestrap/sveltestrap";
+	import { Icon } from "@sveltestrap/sveltestrap";
 
 	import type { CustomPreference } from "$api/models/user";
+	import tippy from "$lib/tippy";
 
 	type Props = { preference: CustomPreference };
 	let { preference }: Props = $props();
-
-	// svelte-ignore non_reactive_update
-	let elem: HTMLSpanElement;
 </script>
 
-<span bind:this={elem} aria-hidden={true}>
+<span use:tippy={{ content: preference.tooltip }} aria-hidden={true}>
 	<Icon name={preference.icon} />
 </span>
 <span class="visually-hidden">{preference.tooltip}:</span>
-<Tooltip aria-hidden target={elem} placement="top">{preference.tooltip}</Tooltip>

Foxnouns.Frontend/src/lib/components/profile/ProfileFlag.svelte

@@ -1,17 +1,18 @@
 <script lang="ts">
 	import type { PrideFlag } from "$api/models/user";
-	import { Tooltip } from "@sveltestrap/sveltestrap";
+	import tippy from "$lib/tippy";
 
 	type Props = { flag: PrideFlag };
 	let { flag }: Props = $props();
-
-	// svelte-ignore non_reactive_update
-	let elem: HTMLImageElement;
 </script>
 
 <span class="mx-2 my-1">
-	<Tooltip target={elem} aria-hidden placement="top">{flag.description ?? flag.name}</Tooltip>
-	<img bind:this={elem} class="flag" src={flag.image_url} alt={flag.description ?? flag.name} />
+	<img
+		use:tippy={{ content: flag.description ?? flag.name }}
+		class="flag"
+		src={flag.image_url}
+		alt={flag.description ?? flag.name}
+	/>
 	{flag.name}
 </span>
 

Foxnouns.Frontend/src/lib/tippy.ts

@@ -0,0 +1,10 @@
+import "tippy.js/animations/scale-subtle.css";
+import { createTippy } from "svelte-tippy";
+
+// use with use:tippy on elements
+// temporary (probably) until sveltestrap works with svelte 5
+const tippy = createTippy({
+	animation: "scale-subtle",
+});
+
+export default tippy;