feat: tippy tooltips

package.json

@@ -22,7 +22,8 @@
         "@aw-labs/appwrite-console": "^1.0.0-0",
         "@aw-labs/icons": "0.0.0-37",
         "@aw-labs/ui": "0.0.0-37",
-        "echarts": "^5.3.3"
+        "echarts": "^5.3.3",
+        "tippy.js": "^6.3.7"
     },
     "devDependencies": {
         "@playwright/test": "^1.24.0",

src/lib/actions/tooltip.ts

@@ -0,0 +1,20 @@
+import type { Action } from 'svelte/action';
+import type { Props } from 'tippy.js';
+import tippy from 'tippy.js';
+
+export const tooltip: Action<HTMLElement, Partial<Props>> = (node, config) => {
+    const instance = tippy(node, config);
+
+    return {
+        update({ content }) {
+            if (content !== instance.props.content) {
+                instance.setProps({
+                    content
+                });
+            }
+        },
+        destroy() {
+            instance.destroy();
+        }
+    };
+};

src/lib/components/copy.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
+    import { tooltip } from '$lib/actions/tooltip';
     import { addNotification } from '$lib/stores/notifications';
 
     export let value: string;
-    let text = 'Click to copy';
+
+    let content = 'Click to copy';
 
     const copy = async () => {
         try {
             await navigator.clipboard.writeText(value);
-            text = 'Copied';
+            content = 'Copied';
         } catch (error) {
             addNotification({
                 message: error.message,
@@ -18,9 +20,11 @@
 </script>
 
 <span
-    class="tooltip "
-    on:mouseenter={() => (text = 'Click to copy')}
-    on:click|preventDefault={copy}>
+    on:click|preventDefault={copy}
+    on:mouseenter={() => setTimeout(() => (content = 'Click to copy'))}
+    use:tooltip={{
+        content,
+        hideOnClick: false
+    }}>
     <slot />
-    <span class="tooltip-popup is-bottom" role="tooltip"> {text} </span>
 </span>

src/lib/components/copyInput.svelte

@@ -1,17 +1,16 @@
 <script lang="ts">
+    import { tooltip } from '$lib/actions/tooltip';
+
     import { addNotification } from '$lib/stores/notifications';
 
     export let value: string;
 
-    let showTooltip = false;
+    let content = 'Click to copy';
 
     const copy = async () => {
         try {
             await navigator.clipboard.writeText(value);
-            showTooltip = true;
-            setTimeout(() => {
-                showTooltip = false;
-            }, 1000);
+            content = 'Copied';
         } catch (error) {
             addNotification({
                 message: error.message,
@@ -23,12 +22,16 @@
 
 <div class="input-text-wrapper is-with-end-button">
     <input {value} type="text" class="input-text" disabled />
-    <button type="button" class="input-button tooltip" aria-label="Click to copy." on:click={copy}>
+    <button
+        type="button"
+        class="input-button"
+        aria-label="Click to copy."
+        on:click={copy}
+        on:mouseenter={() => setTimeout(() => (content = 'Click to copy'))}
+        use:tooltip={{
+            content,
+            hideOnClick: false
+        }}>
         <span class="icon-duplicate" aria-hidden="true" />
-        <div class="tootip">
-            {#if showTooltip}
-                <span class="tooltip-popup" style={`display: block`} role="tooltip"> Copied </span>
-            {/if}
-        </div>
     </button>
 </div>

src/lib/components/index.ts

@@ -18,7 +18,6 @@ export { default as DropListLink } from './dropListLink.svelte';
 export { default as Collapsible } from './collapsible.svelte';
 export { default as DropTabs } from './dropTabs.svelte';
 export { default as DropTabsItem } from './dropTabsItem.svelte';
-export { default as Tooltip } from './tooltip.svelte';
 export { default as Avatar } from './avatar.svelte';
 export { default as SwitchBox } from './switchBox.svelte';
 export { default as SwitchBoxes } from './switchBoxes.svelte';

src/routes/__layout.svelte

@@ -1,5 +1,6 @@
 <script context="module">
     import '@aw-labs/ui/src/_index.scss';
+    import 'tippy.js/dist/tippy.css';
 </script>
 
 <script lang="ts">
@@ -77,3 +78,28 @@
 {:else}
     <Loading />
 {/if}
+
+<style lang="scss" global>
+    .tippy-box {
+        --p-tooltip-text-color: var(--color-neutral-10);
+        --p-tooltip--bg-color: var(--color-neutral-100);
+
+        background-color: hsl(var(--p-tooltip--bg-color));
+        color: hsl(var(--p-tooltip-text-color));
+        font-size: var(--font-size-0);
+        line-height: 1.5;
+
+        &[data-placement^='top'] > .tippy-arrow::before {
+            border-top-color: hsl(var(--p-tooltip--bg-color));
+        }
+        &[data-placement^='bottom'] > .tippy-arrow::before {
+            border-bottom-color: hsl(var(--p-tooltip--bg-color));
+        }
+        &[data-placement^='left'] > .tippy-arrow::before {
+            border-left-color: hsl(var(--p-tooltip--bg-color));
+        }
+        &[data-placement^='right'] > .tippy-arrow::before {
+            border-right-color: hsl(var(--p-tooltip--bg-color));
+        }
+    }
+</style>

src/routes/console/[project]/storage/index.svelte

@@ -2,13 +2,14 @@
     import { page } from '$app/stores';
     import { goto } from '$app/navigation';
     import { Button } from '$lib/elements/forms';
-    import { Empty, Pagination, Tooltip, Copy, Bucket, EmptyBucket } from '$lib/components';
+    import { Empty, Pagination, Copy, Bucket, EmptyBucket } from '$lib/components';
     import { Pill } from '$lib/elements';
     import type { Models } from '@aw-labs/appwrite-console';
     import Create from './_create.svelte';
     import { Container } from '$lib/layout';
     import { base } from '$app/paths';
     import { bucketList } from './store';
+    import { tooltip } from '$lib/actions/tooltip';
 
     let showCreate = false;
     let search = '';
@@ -56,26 +57,26 @@
 
                     <svelte:fragment slot="icons">
                         <li>
-                            <Tooltip
-                                icon="lock-closed"
-                                aria="encryption"
-                                disabled={!bucket.encryption}>
-                                <span
-                                    >{bucket.encryption
+                            <span
+                                class:u-opacity-0-2={!bucket.encryption}
+                                class="icon-lock-closed"
+                                aria-hidden="true"
+                                use:tooltip={{
+                                    content: bucket.encryption
                                         ? 'Encryption enabled'
-                                        : 'Encryption disabled'}</span>
-                            </Tooltip>
+                                        : 'Encryption disabled'
+                                }} />
                         </li>
                         <li>
-                            <Tooltip
-                                icon="shield-check"
-                                aria="antivirus"
-                                disabled={!bucket.antivirus}>
-                                <span
-                                    >{bucket.antivirus
+                            <span
+                                class:u-opacity-0-2={!bucket.antivirus}
+                                class="icon-shield-check"
+                                aria-hidden="true"
+                                use:tooltip={{
+                                    content: bucket.antivirus
                                         ? 'Antivirus enabled'
-                                        : 'Antivirus disabled'}</span>
-                            </Tooltip>
+                                        : 'Antivirus disabled'
+                                }} />
                         </li>
                     </svelte:fragment>
                 </Bucket>