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

Foxnouns.Frontend/package.json

@@ -44,6 +44,8 @@
 		"markdown-it": "^14.1.0",
 		"pretty-bytes": "^6.1.1",
 		"sanitize-html": "^2.13.1",
+		"svelte-tippy": "^1.3.2",
+		"tippy.js": "^6.3.7",
 		"tslog": "^4.9.3"
 	}
 }

Foxnouns.Frontend/pnpm-lock.yaml

@@ -29,6 +29,12 @@ importers:
       sanitize-html:
         specifier: ^2.13.1
         version: 2.13.1
+      svelte-tippy:
+        specifier: ^1.3.2
+        version: 1.3.2
+      tippy.js:
+        specifier: ^6.3.7
+        version: 6.3.7
       tslog:
         specifier: ^4.9.3
         version: 4.9.3
@@ -1325,6 +1331,9 @@ packages:
       svelte:
         optional: true
 
+  svelte-tippy@1.3.2:
+    resolution: {integrity: sha512-41f+85hwhKBRqX0UNYrgFsi34Kk/KDvUkIZXYANxkWoA2NTVTCZbUC2J8hRNZ4TRVxObTshoZRjK2co5+i6LMw==}
+
   svelte@5.2.2:
     resolution: {integrity: sha512-eHIJRcvA6iuXdRGMESTmBtWTQCcCiol4gyH9DA60ybS35W1x27cvtbndNvWDqX72blyf+AYeQ4gzZ0XGg3L8sw==}
     engines: {node: '>=18'}
@@ -1337,6 +1346,9 @@ packages:
   tiny-glob@0.2.9:
     resolution: {integrity: sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==}
 
+  tippy.js@6.3.7:
+    resolution: {integrity: sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==}
+
   to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
@@ -2565,6 +2577,10 @@ snapshots:
     optionalDependencies:
       svelte: 5.2.2
 
+  svelte-tippy@1.3.2:
+    dependencies:
+      tippy.js: 6.3.7
+
   svelte@5.2.2:
     dependencies:
       '@ampproject/remapping': 2.3.0
@@ -2592,6 +2608,10 @@ snapshots:
       globalyzer: 0.1.0
       globrex: 0.1.2
 
+  tippy.js@6.3.7:
+    dependencies:
+      '@popperjs/core': 2.11.8
+
   to-regex-range@5.0.1:
     dependencies:
       is-number: 7.0.0

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;