feat: add hover to Copy component

src/lib/components/copy.svelte

@@ -2,14 +2,15 @@
     import { addNotification } from '$lib/stores/notifications';
 
     export let value: string;
+    let text = 'Copy ID';
 
     const copy = async () => {
         try {
             await navigator.clipboard.writeText(value);
-            addNotification({
-                message: 'Copied to clipboard.',
-                type: 'success'
-            });
+            text = 'Copied ID';
+            setTimeout(() => {
+                text = 'Copy ID';
+            }, 2000);
         } catch (error) {
             addNotification({
                 message: error.message,
@@ -19,6 +20,7 @@
     };
 </script>
 
-<span on:click|preventDefault={copy}>
+<span class="tooltip" on:mouseenter={() => (text = 'Copy ID')} on:click|preventDefault={copy}>
     <slot />
+    <span class="tooltip-popup is-block-end" role="tooltip"> {text} </span>
 </span>

src/lib/elements/table/cellText.svelte

@@ -1,7 +1,12 @@
 <script lang="ts">
     export let title: string;
+    export let showOverflow = false;
 </script>
 
-<div class="table-col is-main" data-title={title} role="cell">
+<div
+    class="table-col is-main"
+    class:u-overflow-visible={showOverflow}
+    data-title={title}
+    role="cell">
     <span class="text"><slot /></span>
 </div>

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

@@ -94,7 +94,7 @@
                                 <Pill danger>Blocked</Pill>
                             {/if}
                         </TableCellText>
-                        <TableCellText title="ID">
+                        <TableCellText showOverflow title="ID">
                             <Copy value={user.$id}>
                                 <Pill button><i class="icon-duplicate" />User ID</Pill>
                             </Copy>