sam/Foxnouns.NET
sam/Foxnouns.NET
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

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

Browse source
This commit is contained in:
sam 2024-11-25 21:43:11 +01:00
parent 004111feb6
commit b6d42fb15d
Signed by: sam
GPG key ID: B4EF20DDE721CAA1
6 changed files with 51 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

9
Foxnouns.Frontend/src/lib/components/StatusIcon.svelte
View file

@ -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>

13
Foxnouns.Frontend/src/lib/components/profile/ProfileFlag.svelte
View file

@ -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>