From 6741dbc2c92178cb3f90d45963ed526689ff7102 Mon Sep 17 00:00:00 2001
From: Luke Parker <10430890+Hona@users.noreply.github.com>
Date: Wed, 22 Jul 2026 23:34:36 +0000
Subject: [PATCH] fix(ui): standardize tooltip delay

---
 .../dialog-select-model-unpaid-v2.tsx         |  2 +-
 .../components/dialog-select-model-unpaid.tsx |  1 +
 .../src/components/dialog-select-model.tsx    |  4 +-
 .../components/prompt-input/context-items.tsx |  1 -
 .../prompt-input/image-attachments.tsx        |  7 +---
 packages/app/src/components/titlebar.tsx      |  5 +--
 packages/app/src/pages/new-session.tsx        |  1 -
 .../src/v2/components/comment-card-v2.tsx     |  1 -
 .../src/v2/components/prompt-input/index.tsx  |  7 +---
 .../src/v2/components/session-review-v2.tsx   | 10 ++---
 packages/ui/src/components/tooltip-intent.ts  | 35 ++++++++++++++++
 packages/ui/src/components/tooltip.tsx        | 42 ++++++++++++++++---
 packages/ui/src/v2/components/tooltip-v2.tsx  | 42 ++++++++++++++++---
 13 files changed, 119 insertions(+), 39 deletions(-)
 create mode 100644 packages/ui/src/components/tooltip-intent.ts

diff --git a/packages/app/src/components/dialog-select-model-unpaid-v2.tsx b/packages/app/src/components/dialog-select-model-unpaid-v2.tsx
index de86485ef9..78a5f41e11 100644
--- a/packages/app/src/components/dialog-select-model-unpaid-v2.tsx
+++ b/packages/app/src/components/dialog-select-model-unpaid-v2.tsx
@@ -88,7 +88,7 @@ export const DialogSelectModelUnpaidV2: Component<{ model?: ModelState }> = (pro
                   class="w-full"
                   placement="right-start"
                   gutter={6}
-                  openDelay={0}
+                  delay="intent"
                   contentStyle={{ "font-family": "var(--v2-font-family-sans)" }}
                   value={
                     <ModelTooltip
diff --git a/packages/app/src/components/dialog-select-model-unpaid.tsx b/packages/app/src/components/dialog-select-model-unpaid.tsx
index 4611a36c95..ba56fa04aa 100644
--- a/packages/app/src/components/dialog-select-model-unpaid.tsx
+++ b/packages/app/src/components/dialog-select-model-unpaid.tsx
@@ -57,6 +57,7 @@ export const DialogSelectModelUnpaid: Component<{ model?: ModelState }> = (props
               class="w-full"
               placement="right-start"
               gutter={12}
+              delay="intent"
               value={
                 <ModelTooltip
                   model={item}
diff --git a/packages/app/src/components/dialog-select-model.tsx b/packages/app/src/components/dialog-select-model.tsx
index 4fb7891ec9..96ca01fe4c 100644
--- a/packages/app/src/components/dialog-select-model.tsx
+++ b/packages/app/src/components/dialog-select-model.tsx
@@ -93,7 +93,7 @@ const ModelList: Component<{
           class="w-full"
           placement="right-start"
           gutter={12}
-          openDelay={0}
+          delay="intent"
           value={<ModelTooltip model={item} latest={item.latest} free={isFree(item.provider.id, item.cost)} />}
         >
           {node}
@@ -452,7 +452,7 @@ export function ModelSelectorPopoverV2(props: {
                               class="w-full"
                               placement="right-start"
                               gutter={6}
-                              openDelay={0}
+                              delay="intent"
                               value={
                                 <ModelTooltip
                                   model={item}
diff --git a/packages/app/src/components/prompt-input/context-items.tsx b/packages/app/src/components/prompt-input/context-items.tsx
index 1f03f199ab..3cdb318c00 100644
--- a/packages/app/src/components/prompt-input/context-items.tsx
+++ b/packages/app/src/components/prompt-input/context-items.tsx
@@ -47,7 +47,6 @@ export const PromptContextItems: Component<ContextItemsProps> = (props) => {
                   </span>
                 }
                 placement="top"
-                openDelay={800}
               >
                 <div
                   classList={{
diff --git a/packages/app/src/components/prompt-input/image-attachments.tsx b/packages/app/src/components/prompt-input/image-attachments.tsx
index 3a0cc3e4dd..929b85937e 100644
--- a/packages/app/src/components/prompt-input/image-attachments.tsx
+++ b/packages/app/src/components/prompt-input/image-attachments.tsx
@@ -52,12 +52,7 @@ export const PromptImageAttachments: Component<PromptImageAttachmentsProps> = (p
             <For each={props.comments ?? []}>
               {(item) => (
                 <div class="relative group shrink-0">
-                  <TooltipV2
-                    value={item.comment}
-                    placement="top"
-                    openDelay={800}
-                    contentClass="max-w-[300px] break-words"
-                  >
+                  <TooltipV2 value={item.comment} placement="top" contentClass="max-w-[300px] break-words">
                     <CommentCardV2
                       comment={item.comment ?? ""}
                       path={item.path}
diff --git a/packages/app/src/components/titlebar.tsx b/packages/app/src/components/titlebar.tsx
index 4578656107..eaea3735e3 100644
--- a/packages/app/src/components/titlebar.tsx
+++ b/packages/app/src/components/titlebar.tsx
@@ -607,7 +607,6 @@ export function Titlebar(props: { update?: TitlebarUpdate; debugTools?: { visibl
                           placement="bottom"
                           title={language.t("command.session.new")}
                           keybind={command.keybind("session.new")}
-                          openDelay={800}
                         >
                           <Button
                             variant="ghost"
@@ -637,7 +636,7 @@ export function Titlebar(props: { update?: TitlebarUpdate; debugTools?: { visibl
                   >
                     <Show when={hasProjects() && nav()}>
                       <div class="flex items-center gap-0 transition-transform">
-                        <Tooltip placement="bottom" value={language.t("common.goBack")} openDelay={800}>
+                        <Tooltip placement="bottom" value={language.t("common.goBack")}>
                           <Button
                             variant="ghost"
                             icon="chevron-left"
@@ -647,7 +646,7 @@ export function Titlebar(props: { update?: TitlebarUpdate; debugTools?: { visibl
                             aria-label={language.t("common.goBack")}
                           />
                         </Tooltip>
-                        <Tooltip placement="bottom" value={language.t("common.goForward")} openDelay={800}>
+                        <Tooltip placement="bottom" value={language.t("common.goForward")}>
                           <Button
                             variant="ghost"
                             icon="chevron-right"
diff --git a/packages/app/src/pages/new-session.tsx b/packages/app/src/pages/new-session.tsx
index d97f5779ec..7972cf62b4 100644
--- a/packages/app/src/pages/new-session.tsx
+++ b/packages/app/src/pages/new-session.tsx
@@ -263,7 +263,6 @@ function ProviderTip(props: { ready: () => boolean; connected: () => boolean; op
           <TooltipV2
             class="hover-reveal absolute left-full top-0 flex h-6 w-7 items-center justify-end delay-0 duration-0 group-hover/provider-tip:delay-[250ms] group-hover/provider-tip:duration-150 group-hover/provider-tip:opacity-100 focus-within:delay-0 focus-within:duration-0 focus-within:opacity-100"
             placement="top"
-            openDelay={1000}
             value={language.t("common.dismiss")}
           >
             <button
diff --git a/packages/session-ui/src/v2/components/comment-card-v2.tsx b/packages/session-ui/src/v2/components/comment-card-v2.tsx
index dbcdb24345..88bab5a523 100644
--- a/packages/session-ui/src/v2/components/comment-card-v2.tsx
+++ b/packages/session-ui/src/v2/components/comment-card-v2.tsx
@@ -32,7 +32,6 @@ export function CommentCardV2(props: {
   return (
     <TooltipV2
       placement="top"
-      openDelay={1000}
       value={props.title ?? props.comment}
       disabled={!props.tooltip || !truncated()}
       class={props.wide ? "w-full" : undefined}
diff --git a/packages/session-ui/src/v2/components/prompt-input/index.tsx b/packages/session-ui/src/v2/components/prompt-input/index.tsx
index 9b011f03e9..3eadf0bf14 100644
--- a/packages/session-ui/src/v2/components/prompt-input/index.tsx
+++ b/packages/session-ui/src/v2/components/prompt-input/index.tsx
@@ -385,12 +385,7 @@ export function PromptInputV2Attachments(props: {
           <For each={props.comments ?? []}>
             {(comment) => (
               <div class="relative group shrink-0">
-                <TooltipV2
-                  value={comment.comment}
-                  placement="top"
-                  openDelay={800}
-                  contentClass="max-w-[300px] break-words"
-                >
+                <TooltipV2 value={comment.comment} placement="top" contentClass="max-w-[300px] break-words">
                   <CommentCardV2
                     comment={comment.comment ?? ""}
                     path={comment.path}
diff --git a/packages/session-ui/src/v2/components/session-review-v2.tsx b/packages/session-ui/src/v2/components/session-review-v2.tsx
index abbe90d112..6b2a5d5425 100644
--- a/packages/session-ui/src/v2/components/session-review-v2.tsx
+++ b/packages/session-ui/src/v2/components/session-review-v2.tsx
@@ -214,7 +214,6 @@ export function SessionReviewV2(props: SessionReviewV2Props) {
       </Show>
       <div class="flex items-center">
         <TooltipV2
-          openDelay={2000}
           inactive={!prev()}
           value={
             <>
@@ -234,7 +233,6 @@ export function SessionReviewV2(props: SessionReviewV2Props) {
           />
         </TooltipV2>
         <TooltipV2
-          openDelay={2000}
           inactive={!next()}
           value={
             <>
@@ -268,12 +266,12 @@ export function SessionReviewV2(props: SessionReviewV2Props) {
         class="session-review-v2-segmented-control session-review-v2-segmented-control--icon"
         aria-label={i18n.t("ui.sessionReviewV2.expandMode")}
       >
-        <TooltipV2 openDelay={2000} value={i18n.t("ui.sessionReviewV2.showAllLines")}>
+        <TooltipV2 value={i18n.t("ui.sessionReviewV2.showAllLines")}>
           <SegmentedControlItemV2 value="expand" aria-label={i18n.t("ui.sessionReviewV2.showAllLines")}>
             <Icon name="expand" />
           </SegmentedControlItemV2>
         </TooltipV2>
-        <TooltipV2 openDelay={2000} value={i18n.t("ui.sessionReviewV2.hideNonDiffLines")}>
+        <TooltipV2 value={i18n.t("ui.sessionReviewV2.hideNonDiffLines")}>
           <SegmentedControlItemV2 value="collapse" aria-label={i18n.t("ui.sessionReviewV2.hideNonDiffLines")}>
             <Icon name="collapse" />
           </SegmentedControlItemV2>
@@ -289,12 +287,12 @@ export function SessionReviewV2(props: SessionReviewV2Props) {
           class="session-review-v2-segmented-control session-review-v2-segmented-control--icon"
           aria-label={i18n.t("ui.sessionReviewV2.diffView")}
         >
-          <TooltipV2 openDelay={2000} value={i18n.t("ui.sessionReviewV2.unifiedDiff")}>
+          <TooltipV2 value={i18n.t("ui.sessionReviewV2.unifiedDiff")}>
             <SegmentedControlItemV2 value="unified" aria-label={i18n.t("ui.sessionReviewV2.unifiedDiff")}>
               <Icon name="unified" />
             </SegmentedControlItemV2>
           </TooltipV2>
-          <TooltipV2 openDelay={2000} value={i18n.t("ui.sessionReviewV2.splitDiff")}>
+          <TooltipV2 value={i18n.t("ui.sessionReviewV2.splitDiff")}>
             <SegmentedControlItemV2 value="split" aria-label={i18n.t("ui.sessionReviewV2.splitDiff")}>
               <Icon name="split" />
             </SegmentedControlItemV2>
diff --git a/packages/ui/src/components/tooltip-intent.ts b/packages/ui/src/components/tooltip-intent.ts
new file mode 100644
index 0000000000..25dd7d5049
--- /dev/null
+++ b/packages/ui/src/components/tooltip-intent.ts
@@ -0,0 +1,35 @@
+const OPEN_DELAY = 1_000
+
+// Kobalte warms every tooltip globally. Keep intent previews isolated so opening
+// a model picker never inherits warm state from an unrelated tooltip.
+let warm = false
+let reset: ReturnType<typeof setTimeout> | undefined
+
+export function openTooltipIntent(open: () => void) {
+  clearTimeout(reset)
+  reset = undefined
+  if (warm) {
+    open()
+    return
+  }
+  const timer = setTimeout(() => {
+    warm = true
+    open()
+  }, OPEN_DELAY)
+  return () => clearTimeout(timer)
+}
+
+export function closeTooltipIntent() {
+  clearTimeout(reset)
+  // Adjacent triggers enter before the next task; leaving the group does not.
+  reset = setTimeout(() => {
+    warm = false
+    reset = undefined
+  })
+}
+
+export function resetTooltipIntent() {
+  clearTimeout(reset)
+  reset = undefined
+  warm = false
+}
diff --git a/packages/ui/src/components/tooltip.tsx b/packages/ui/src/components/tooltip.tsx
index 6a2f4b55d4..7a994137a2 100644
--- a/packages/ui/src/components/tooltip.tsx
+++ b/packages/ui/src/components/tooltip.tsx
@@ -2,13 +2,15 @@ import { Tooltip as KobalteTooltip } from "@kobalte/core/tooltip"
 import { createEffect, Match, onCleanup, splitProps, Switch, type JSX } from "solid-js"
 import type { ComponentProps } from "solid-js"
 import { createStore } from "solid-js/store"
+import { closeTooltipIntent, openTooltipIntent, resetTooltipIntent } from "./tooltip-intent"
 
-export interface TooltipProps extends ComponentProps<typeof KobalteTooltip> {
+export interface TooltipProps extends Omit<ComponentProps<typeof KobalteTooltip>, "openDelay"> {
   value: JSX.Element
   class?: string
   contentClass?: string
   contentStyle?: JSX.CSSProperties
   inactive?: boolean
+  delay?: "standard" | "intent"
   forceOpen?: boolean
 }
 
@@ -34,6 +36,7 @@ export function TooltipKeybind(props: TooltipKeybindProps) {
 
 export function Tooltip(props: TooltipProps) {
   let ref: HTMLDivElement | undefined
+  let cancelIntent: (() => void) | undefined
   const [state, setState] = createStore({
     open: false,
     block: false,
@@ -45,19 +48,37 @@ export function Tooltip(props: TooltipProps) {
     "contentClass",
     "contentStyle",
     "inactive",
+    "delay",
     "forceOpen",
     "ignoreSafeArea",
     "value",
   ])
 
-  const close = () => setState("open", false)
-
   const inside = () => {
     const active = document.activeElement
     if (!ref || !active) return false
     return ref.contains(active)
   }
 
+  const close = () => {
+    cancelIntent?.()
+    cancelIntent = undefined
+    if (local.delay === "intent") closeTooltipIntent()
+    setState("open", false)
+  }
+
+  const show = () => {
+    if (local.delay !== "intent" || inside()) {
+      setState("open", true)
+      return
+    }
+    if (cancelIntent) return
+    cancelIntent = openTooltipIntent(() => {
+      cancelIntent = undefined
+      setState("open", true)
+    })
+  }
+
   const drop = (expand = state.expand) => {
     if (expand) return
     if (ref?.matches(":hover")) return
@@ -99,6 +120,11 @@ export function Tooltip(props: TooltipProps) {
     onCleanup(() => obs.disconnect())
   })
 
+  onCleanup(() => {
+    cancelIntent?.()
+    if (local.delay === "intent") resetTooltipIntent()
+  })
+
   let justClickedTrigger = false
 
   return (
@@ -107,8 +133,8 @@ export function Tooltip(props: TooltipProps) {
       <Match when={true}>
         <KobalteTooltip
           gutter={4}
-          openDelay={400}
-          skipDelayDuration={300}
+          openDelay={local.delay === "intent" ? 0 : 400}
+          skipDelayDuration={local.delay === "intent" ? 0 : 300}
           {...others}
           closeDelay={0}
           ignoreSafeArea={local.ignoreSafeArea ?? true}
@@ -120,7 +146,11 @@ export function Tooltip(props: TooltipProps) {
               justClickedTrigger = false
               return
             }
-            setState("open", open)
+            if (open) {
+              show()
+              return
+            }
+            close()
           }}
         >
           <KobalteTooltip.Trigger
diff --git a/packages/ui/src/v2/components/tooltip-v2.tsx b/packages/ui/src/v2/components/tooltip-v2.tsx
index 911307b681..3819a66f89 100644
--- a/packages/ui/src/v2/components/tooltip-v2.tsx
+++ b/packages/ui/src/v2/components/tooltip-v2.tsx
@@ -2,19 +2,22 @@ import { Tooltip as KobalteTooltip } from "@kobalte/core/tooltip"
 import { createEffect, Match, onCleanup, splitProps, Switch, type JSX } from "solid-js"
 import type { ComponentProps } from "solid-js"
 import { createStore } from "solid-js/store"
+import { closeTooltipIntent, openTooltipIntent, resetTooltipIntent } from "../../components/tooltip-intent"
 import "./tooltip-v2.css"
 
-export interface TooltipV2Props extends ComponentProps<typeof KobalteTooltip> {
+export interface TooltipV2Props extends Omit<ComponentProps<typeof KobalteTooltip>, "openDelay"> {
   value: JSX.Element
   class?: string
   contentClass?: string
   contentStyle?: JSX.CSSProperties
   inactive?: boolean
+  delay?: "standard" | "intent"
   forceOpen?: boolean
 }
 
 export function TooltipV2(props: TooltipV2Props) {
   let ref: HTMLDivElement | undefined
+  let cancelIntent: (() => void) | undefined
   const [state, setState] = createStore({
     open: false,
     block: false,
@@ -26,19 +29,37 @@ export function TooltipV2(props: TooltipV2Props) {
     "contentClass",
     "contentStyle",
     "inactive",
+    "delay",
     "forceOpen",
     "ignoreSafeArea",
     "value",
   ])
 
-  const close = () => setState("open", false)
-
   const inside = () => {
     const active = document.activeElement
     if (!ref || !active) return false
     return ref.contains(active)
   }
 
+  const close = () => {
+    cancelIntent?.()
+    cancelIntent = undefined
+    if (local.delay === "intent") closeTooltipIntent()
+    setState("open", false)
+  }
+
+  const show = () => {
+    if (local.delay !== "intent" || inside()) {
+      setState("open", true)
+      return
+    }
+    if (cancelIntent) return
+    cancelIntent = openTooltipIntent(() => {
+      cancelIntent = undefined
+      setState("open", true)
+    })
+  }
+
   const drop = (expand = state.expand) => {
     if (expand) return
     if (ref?.matches(":hover")) return
@@ -80,6 +101,11 @@ export function TooltipV2(props: TooltipV2Props) {
     onCleanup(() => obs.disconnect())
   })
 
+  onCleanup(() => {
+    cancelIntent?.()
+    if (local.delay === "intent") resetTooltipIntent()
+  })
+
   let justClickedTrigger = false
 
   return (
@@ -88,8 +114,8 @@ export function TooltipV2(props: TooltipV2Props) {
       <Match when={true}>
         <KobalteTooltip
           gutter={4}
-          openDelay={400}
-          skipDelayDuration={300}
+          openDelay={local.delay === "intent" ? 0 : 400}
+          skipDelayDuration={local.delay === "intent" ? 0 : 300}
           {...others}
           closeDelay={0}
           ignoreSafeArea={local.ignoreSafeArea ?? true}
@@ -101,7 +127,11 @@ export function TooltipV2(props: TooltipV2Props) {
               justClickedTrigger = false
               return
             }
-            setState("open", open)
+            if (open) {
+              show()
+              return
+            }
+            close()
           }}
         >
           <KobalteTooltip.Trigger