fix(app): no delay on tooltip close

Author: adamdotdevin

packages/ui/src/components/message-nav.css

@@ -95,7 +95,7 @@
   color: var(--text-base);
 }
 
-[data-slot="message-nav-tooltip"] {
+.message-nav-tooltip {
   z-index: 1000;
 }
 

packages/ui/src/components/message-nav.tsx

@@ -1,7 +1,7 @@
 import { UserMessage } from "@opencode-ai/sdk/v2"
 import { ComponentProps, For, Match, Show, splitProps, Switch } from "solid-js"
 import { DiffChanges } from "./diff-changes"
-import { Tooltip } from "@kobalte/core/tooltip"
+import { Tooltip } from "./tooltip"
 import { useI18n } from "../context/i18n"
 
 export function MessageNav(
@@ -70,15 +70,20 @@ export function MessageNav(
   return (
     <Switch>
       <Match when={local.size === "compact"}>
-        <Tooltip openDelay={0} closeDelay={300} placement="right-start" gutter={-40} shift={-10} overlap>
-          <Tooltip.Trigger as="div">{content()}</Tooltip.Trigger>
-          <Tooltip.Portal>
-            <Tooltip.Content data-slot="message-nav-tooltip">
-              <div data-slot="message-nav-tooltip-content">
-                <MessageNav {...props} size="normal" class="" />
-              </div>
-            </Tooltip.Content>
-          </Tooltip.Portal>
+        <Tooltip
+          openDelay={0}
+          placement="right-start"
+          gutter={-40}
+          shift={-10}
+          overlap
+          contentClass="message-nav-tooltip"
+          value={
+            <div data-slot="message-nav-tooltip-content">
+              <MessageNav {...props} size="normal" class="" />
+            </div>
+          }
+        >
+          {content()}
         </Tooltip>
       </Match>
       <Match when={local.size === "normal"}>{content()}</Match>

packages/ui/src/components/tooltip.tsx

@@ -47,7 +47,7 @@ export function Tooltip(props: TooltipProps) {
     <Switch>
       <Match when={local.inactive}>{local.children}</Match>
       <Match when={true}>
-        <KobalteTooltip gutter={4} {...others} open={local.forceOpen || open()} onOpenChange={setOpen}>
+        <KobalteTooltip gutter={4} {...others} closeDelay={0} open={local.forceOpen || open()} onOpenChange={setOpen}>
           <KobalteTooltip.Trigger as={"div"} data-component="tooltip-trigger" class={local.class}>
             {local.children}
           </KobalteTooltip.Trigger>