pretty tooltips

src/app.css

@@ -65,7 +65,7 @@
 	--primary-foreground: oklch(1 0 0);
 	--secondary: oklch(0.3137 0.0306 310.061);
 	--secondary-foreground: oklch(0.8483 0.0382 307.9613);
-	--muted: oklch(0.2634 0.0219 309.4748);
+	--muted: oklch(0.3234 0.0419 257.4748);
 	--muted-foreground: oklch(0.794 0.0372 307.1032);
 	--accent: oklch(0.3649 0.0508 308.4911);
 	--accent-foreground: oklch(0.9647 0.0091 341.8035);

src/lib/components/ui/tooltip.svelte

@@ -15,8 +15,8 @@
 	const {
 		children,
 		trigger,
-		placement = 'top',
-		openDelay = 500,
+		placement = 'bottom',
+		openDelay = 250,
 		disabled,
 		...rest
 	}: Props = $props();
@@ -37,28 +37,26 @@
 			else open = v;
 		},
 		openDelay: () => openDelay,
+		disableHoverableContent: true,
 		...getters(rest),
 	});
 </script>
 
 {@render trigger(tooltip)}
 
-<div {...tooltip.content} class="rounded-xl bg-white p-0 shadow-xl dark:bg-stone-700">
-	<div {...tooltip.arrow} class="size-2 rounded-tl"></div>
-	<p class="px-4 py-1 text-stone-700 dark:text-white">{@render children()}</p>
+<div {...tooltip.content} class="bg-popover border-border rounded border p-0 shadow-xl">
+	<p class="text-popover-foreground px-2 py-1 text-xs">{@render children()}</p>
 </div>
 
 <style>
 	[data-melt-tooltip-content] {
-		border: 0;
-
 		position: absolute;
 		pointer-events: none;
 		opacity: 0;
 
 		transform: scale(0.9);
 
-		transition: 0.3s;
+		transition: 0.1s;
 		transition-property: opacity, transform;
 	}
 

src/routes/chat/+layout.svelte

@@ -89,7 +89,7 @@
 									<PinIcon class="size-4" />
 								</button>
 							{/snippet}
-							Pin
+							Pin thread
 						</Tooltip>
 						<Tooltip>
 							{#snippet trigger(tooltip)}
@@ -97,7 +97,7 @@
 									<XIcon class="size-4" />
 								</button>
 							{/snippet}
-							Delete
+							Delete thread
 						</Tooltip>
 					</div>
 				</a>