Improve tooltiips UX (#11381)

* remove duplicated Toggle.story

* feat(tooltip): make subsequent tooltips show instantly when one is visible, add global tracking

* remove unnecessary delays

Author: PavelLaptev

apps/desktop/src/components/CollapseStackButton.svelte

@@ -30,7 +30,7 @@
 	}
 </script>
 
-<Tooltip text={isFolded ? 'Expand stack' : 'Collapse stack'} delay={800}>
+<Tooltip text={isFolded ? 'Expand stack' : 'Collapse stack'}>
 	<button
 		class="collapse-button"
 		class:isFolded

packages/ui/src/lib/components/LineStats.svelte

@@ -9,7 +9,7 @@
 </script>
 
 {#if linesAdded > 0 || linesRemoved > 0}
-	<Tooltip text="Lines added/removed" delay={1200}>
+	<Tooltip text="Lines added/removed">
 		<div class="line-stats text-11 text-semibold">
 			{#if linesAdded > 0}
 				<span class="added">+{linesAdded}</span>

packages/ui/src/lib/components/Tooltip.svelte

@@ -1,6 +1,10 @@
 <script lang="ts" module>
 	export type TooltipPosition = 'top' | 'bottom';
 	export type TooltipAlign = 'start' | 'center' | 'end';
+
+	// Global state to track if any tooltip is currently shown
+	let anyTooltipShown = $state(false);
+	let tooltipHideTimeout: ReturnType<typeof setTimeout> | undefined;
 </script>
 
 <script lang="ts">
@@ -44,6 +48,7 @@
 	let position = $state(requestedPosition);
 	let show = $state(false);
 	let timeoutId: undefined | ReturnType<typeof setTimeout> = $state();
+	let isInstant = $state(false);
 
 	const isTextEmpty = $derived(!text || text === '');
 
@@ -68,14 +73,31 @@
 
 	function handleMouseEnter() {
 		if (disabled) return;
-		timeoutId = setTimeout(() => {
+
+		// If any tooltip is already shown, show this one instantly
+		if (anyTooltipShown) {
+			isInstant = true;
 			show = true;
-		}, delay);
+			clearTimeout(tooltipHideTimeout);
+		} else {
+			isInstant = false;
+			timeoutId = setTimeout(() => {
+				show = true;
+				anyTooltipShown = true;
+			}, delay);
+		}
 	}
 
 	function handleMouseLeave() {
 		clearTimeout(timeoutId);
 		show = false;
+
+		// Reset the global state after a short delay
+		// This allows for smooth transitions between tooltips
+		clearTimeout(tooltipHideTimeout);
+		tooltipHideTimeout = setTimeout(() => {
+			anyTooltipShown = false;
+		}, 100);
 	}
 
 	function handleClick(e: MouseEvent) {
@@ -112,8 +134,10 @@
 				use:portal={'body'}
 				class="tooltip-container text-11 text-body"
 				style:max-width="{pxToRem(maxWidth)}rem"
+				data-instant={isInstant ? true : undefined}
 				transition:flyScale={{
-					position: position
+					position: position,
+					duration: 150
 				}}
 			>
 				<span>{text}</span>

packages/ui/src/stories/components/Toggle.stories.svelte

@@ -63,6 +63,38 @@
 
 <Story name="Playground" />
 
+<Story name="Multiple Tooltips">
+	{#snippet template()}
+		<div class="wrapper">
+			<p class="text-13 text">Hover over these items quickly to test instant tooltips:</p>
+			<div class="tooltip-grid">
+				<Tooltip text="First tooltip">
+					<button type="button" class="test-button">Item 1</button>
+				</Tooltip>
+				<Tooltip text="Second tooltip">
+					<button type="button" class="test-button">Item 2</button>
+				</Tooltip>
+				<Tooltip text="Third tooltip">
+					<button type="button" class="test-button">Item 3</button>
+				</Tooltip>
+				<Tooltip text="Fourth tooltip">
+					<button type="button" class="test-button">Item 4</button>
+				</Tooltip>
+				<Tooltip text="Fifth tooltip">
+					<button type="button" class="test-button">Item 5</button>
+				</Tooltip>
+				<Tooltip text="Sixth tooltip">
+					<button type="button" class="test-button">Item 6</button>
+				</Tooltip>
+			</div>
+			<p class="text-13 text" style="margin-top: 20px;">
+				The first tooltip has a 500ms delay. Once shown, move between items quickly - subsequent
+				tooltips appear instantly without delay or animation.
+			</p>
+		</div>
+	{/snippet}
+</Story>
+
 <style>
 	.wrapper {
 		display: flex;
@@ -78,4 +110,26 @@
 		text-decoration: underline;
 		text-decoration-style: dotted;
 	}
+
+	.tooltip-grid {
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
+		margin-top: 20px;
+		gap: 16px;
+	}
+
+	.test-button {
+		padding: 12px 24px;
+		border: 1px solid var(--clr-border-2);
+		border-radius: var(--radius-m);
+		background: var(--clr-bg-1);
+		color: var(--clr-text-1);
+		cursor: pointer;
+		transition: all 0.15s ease;
+	}
+
+	.test-button:hover {
+		border-color: var(--clr-border-3);
+		background: var(--clr-bg-2);
+	}
 </style>