Hide Id copyable tooltip when hovering the tooltip itself

radicle-dev · Jun 18, 2024 · 5c18d78 · 5c18d78
1 parent 05632a1
commit 5c18d78
Showing 1 changed file with 26 additions and 30 deletions.
diff --git a/src/components/Id.svelte b/src/components/Id.svelte
@@ -75,42 +75,38 @@
 </style>
 
 <div class="container">
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
   <div
-    role="button"
-    tabindex="0"
     on:mouseenter={() => {
       setVisible(true);
     }}
     on:mouseleave={() => {
       setVisible(false);
-    }}>
-    <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <div
-      class="target-{style} global-{style}"
-      style:cursor="pointer"
-      aria-label={ariaLabel}
-      on:click={async () => {
-        await copy();
-        setVisible(true);
-      }}
-      role="button"
-      tabindex="0">
-      <slot>
-        {#if shorten}
-          {formatObjectId(id)}
-        {:else}
-          {id}
-        {/if}
-      </slot>
-    </div>
+    }}
+    class="target-{style} global-{style}"
+    style:cursor="pointer"
+    aria-label={ariaLabel}
+    on:click={async () => {
+      await copy();
+      setVisible(true);
+    }}
+    role="button"
+    tabindex="0">
+    <slot>
+      {#if shorten}
+        {formatObjectId(id)}
+      {:else}
+        {id}
+      {/if}
+    </slot>
+  </div>
 
-    {#if visible}
-      <div style:position="absolute">
-        <div class="popover">
-          <IconSmall name={icon} />
-          {tooltip}
-        </div>
+  {#if visible}
+    <div style:position="absolute">
+      <div class="popover">
+        <IconSmall name={icon} />
+        {tooltip}
       </div>
-    {/if}
-  </div>
+    </div>
+  {/if}
 </div>