src/app.css

@@ -219,6 +219,12 @@
 
 [data-tip]::before {
   @apply ellipsize;
+  background-color: #1f2937 !important;
+  color: #f9fafb !important;
+}
+
+[data-tip]::after {
+  border-right-color: #1f2937 !important;
 }
 
 .content-padding-x {

src/lib/components/PrimaryNavItem.svelte

@@ -13,32 +13,35 @@
   } = $props()
 
   const active = $derived($page.url?.pathname?.startsWith(prefix || href || "bogus"))
+
+  const wrapperClass = $derived(
+    ["relative h-14 w-14 p-1", title ? "tooltip tooltip-right" : ""].filter(Boolean).join(" "),
+  )
+
+  const innerClass = $derived(
+    [
+      "flex h-full w-full cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-base-300",
+      restProps.class,
+    ]
+      .filter(Boolean)
+      .join(" "),
+  )
 </script>
 
-{#if onclick}
-  <Button {onclick} class="relative z-nav-item flex h-14 w-14 items-center justify-center p-1">
-    <div
-      class="aspect-square flex-grow cursor-pointer rounded-full {restProps.class} flex items-center justify-center transition-colors hover:bg-base-300"
-      class:bg-base-300={active}
-      class:tooltip={title}
-      data-tip={title}>
+<div class={wrapperClass} data-tip={title}>
+  {#if onclick}
+    <Button {onclick} class={innerClass}>
       {@render children?.()}
       {#if !active && notification}
         <div class="absolute right-1 top-1 h-2 w-2 rounded-full bg-primary"></div>
       {/if}
-    </div>
-  </Button>
-{:else}
-  <a {href} class="relative z-nav-item flex h-14 w-14 items-center justify-center p-1">
-    <div
-      class="aspect-square flex-grow cursor-pointer rounded-full {restProps.class} flex items-center justify-center transition-colors hover:bg-base-300"
-      class:bg-base-300={active}
-      class:tooltip={title}
-      data-tip={title}>
+    </Button>
+  {:else}
+    <a {href} class={innerClass}>
       {@render children?.()}
       {#if !active && notification}
         <div class="absolute right-1 top-1 h-2 w-2 rounded-full bg-primary"></div>
       {/if}
-    </div>
-  </a>
-{/if}
+    </a>
+  {/if}
+</div>