diff --git a/src/lib/holocene/navigation/navigation-badge.svelte b/src/lib/holocene/navigation/navigation-badge.svelte
index a04e283a5a..9fa2692501 100644
--- a/src/lib/holocene/navigation/navigation-badge.svelte
+++ b/src/lib/holocene/navigation/navigation-badge.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+  import Tooltip from '$lib/holocene/tooltip.svelte';
+  import { navOpen } from '$lib/stores/nav-open';
+
   import type { IconName } from '../icon';
   import Icon from '../icon/icon.svelte';
 
@@ -25,14 +28,16 @@
     {target}
     class="relative flex cursor-pointer items-center border border-white/10 bg-white/5 text-white hover:bg-white hover:text-black group-data-[nav=closed]:p-1 group-data-[nav=open]:px-2.5 group-data-[nav=open]:py-2"
   >
-    <div
-      class="flex h-6 w-6 items-center whitespace-nowrap after:absolute after:left-[calc(100%_+_1.5rem)] after:top-0 after:hidden after:h-8 after:items-center after:rounded-md after:bg-slate-800 after:p-1 after:px-2 after:text-xs after:text-white after:content-[attr(data-tooltip)] group-data-[nav=open]:hidden group-data-[nav=open]:justify-start group-data-[nav=closed]:justify-center group-data-[nav=closed]:hover:after:flex"
-      data-tooltip={tooltip}
+    <Tooltip
+      text={tooltip}
+      right
+      hide={$navOpen}
+      class="flex h-6 w-6 items-center whitespace-nowrap group-data-[nav=open]:hidden group-data-[nav=closed]:justify-center"
     >
       {#if icon}
         <Icon name={icon} />
       {/if}
-    </div>
+    </Tooltip>
     <div
       class="text-center group-data-[nav=open]:visible group-data-[nav=closed]:hidden"
     >
diff --git a/src/lib/holocene/navigation/navigation-button.svelte b/src/lib/holocene/navigation/navigation-button.svelte
index 30ff54765e..e9362cb86c 100644
--- a/src/lib/holocene/navigation/navigation-button.svelte
+++ b/src/lib/holocene/navigation/navigation-button.svelte
@@ -2,6 +2,8 @@
   import { twMerge as merge } from 'tailwind-merge';
 
   import type { IconName } from '$lib/holocene/icon';
+  import Tooltip from '$lib/holocene/tooltip.svelte';
+  import { navOpen } from '$lib/stores/nav-open';
 
   import Icon from '../icon/icon.svelte';
 
@@ -32,13 +34,14 @@
   )}
 >
   {#if icon}
-    <div
-      class="flex h-6 w-6 items-center after:absolute after:left-[calc(100%_+_1.5rem)] after:top-0 after:hidden after:h-8 after:items-center after:bg-slate-800 after:p-1 after:px-2 after:text-xs after:text-white after:content-[attr(data-tooltip)] group-data-[nav=closed]:hover:after:flex"
-      data-tooltip={tooltip}
-      aria-hidden="true"
+    <Tooltip
+      text={tooltip}
+      right
+      hide={$navOpen}
+      class="flex h-6 w-6 items-center"
     >
       <Icon name={icon} {animate} {active} />
-    </div>
+    </Tooltip>
   {/if}
   <div class="opacity-0 transition-opacity group-data-[nav=open]:opacity-100">
     {label}
diff --git a/src/lib/holocene/navigation/navigation-item.svelte b/src/lib/holocene/navigation/navigation-item.svelte
index 0907df951b..2b47e4dae8 100644
--- a/src/lib/holocene/navigation/navigation-item.svelte
+++ b/src/lib/holocene/navigation/navigation-item.svelte
@@ -5,6 +5,7 @@
 
   import type { IconName } from '$lib/holocene/icon';
   import Icon from '$lib/holocene/icon/icon.svelte';
+  import Tooltip from '$lib/holocene/tooltip.svelte';
   import { navOpen } from '$lib/stores/nav-open';
 
   export let link: string;
@@ -48,12 +49,14 @@
     class:text-disabled={disabled}
   >
     {#if icon}
-      <div
-        class="flex h-6 w-6 items-center after:absolute after:left-[calc(100%_+_1.5rem)] after:top-0 after:hidden after:h-8 after:items-center after:bg-slate-800 after:p-1 after:px-2 after:text-xs after:text-white after:content-[attr(data-tooltip)] group-data-[nav=closed]:hover:after:flex"
-        data-tooltip={tooltip}
+      <Tooltip
+        text={tooltip}
+        right
+        hide={$navOpen}
+        class="flex h-6 w-6 items-center"
       >
         <Icon name={icon} {animate} />
-      </div>
+      </Tooltip>
     {/if}
     <div
       class="opacity-0 transition-opacity group-data-[nav=open]:opacity-100"