Use Tooltip component

sillsdev · Feb 17, 2025 · a183475 · a183475
1 parent 1e5fad9
commit a183475
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/source/SIL.AppBuilder.Portal/src/lib/components/Tooltip.svelte b/source/SIL.AppBuilder.Portal/src/lib/components/Tooltip.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+  interface Props {
+    tip: string | null | undefined;
+    className?: string; // TODO: Add snippet support once we have Svelte 5/DaisyUI 5
+    children?: import('svelte').Snippet;
+  }
+
+  let { tip, className = '', children }: Props = $props();
+  
+</script>
+
+<span class="tooltip tooltip-secondary {className}" data-tip={tip}>
+  {@render children?.()}
+</span>
diff --git a/...IL.AppBuilder.Portal/src/routes/(authenticated)/admin/settings/build-engines/+page.svelte b/...IL.AppBuilder.Portal/src/routes/(authenticated)/admin/settings/build-engines/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import DataDisplayBox from '$lib/components/settings/DataDisplayBox.svelte';
+  import Tooltip from '$lib/components/Tooltip.svelte';
   import * as m from '$lib/paraglide/messages';
   import { languageTag } from '$lib/paraglide/runtime';
   import { getRelativeTime } from '$lib/timeUtils';
@@ -14,9 +15,9 @@
 </script>
 
 {#snippet date(engine?: (typeof data.buildEngines)[0])}
-  <span class="tooltip" style="text-indent: 0;" data-tip={engine?.DateUpdated?.toLocaleString(langTag)}>
+  <Tooltip className="indent-0" tip={engine?.DateUpdated?.toLocaleString(langTag)}>
     {engine?.DateUpdated ? getRelativeTime(engine.DateUpdated) : '-'}
-  </span>
+  </Tooltip>
 {/snippet}
 
 <div class="flex flex-col w-full">