From f83f84afac6a56e7403b15b5a204ba8bb3edeec4 Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Mon, 2 Mar 2026 17:54:59 +0800
Subject: [PATCH] refactor(tooltip): support per-instance delay and apply in
 compliance menu

---
 web/app/components/base/ui/tooltip/index.tsx              | 8 ++++++--
 web/app/components/header/account-dropdown/compliance.tsx | 4 ++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/web/app/components/base/ui/tooltip/index.tsx b/web/app/components/base/ui/tooltip/index.tsx
index 7a61ff5850..fb27803eb7 100644
--- a/web/app/components/base/ui/tooltip/index.tsx
+++ b/web/app/components/base/ui/tooltip/index.tsx
@@ -14,6 +14,8 @@ export type TooltipProps = {
   popupClassName?: string
   noDecoration?: boolean
   offset?: number
+  delay?: number
+  closeDelay?: number
 }
 
 const Tooltip = React.memo(({
@@ -24,6 +26,8 @@ const Tooltip = React.memo(({
   popupClassName,
   noDecoration,
   offset = 8,
+  delay,
+  closeDelay,
 }: TooltipProps) => {
   const { side, align } = parsePlacement(position)
 
@@ -33,8 +37,8 @@ const Tooltip = React.memo(({
   return (
     <BaseTooltip.Root>
       {React.isValidElement(children)
-        ? <BaseTooltip.Trigger render={children} />
-        : <BaseTooltip.Trigger render={<span className="inline-flex" />}>{children}</BaseTooltip.Trigger>}
+        ? <BaseTooltip.Trigger delay={delay} closeDelay={closeDelay} render={children} />
+        : <BaseTooltip.Trigger delay={delay} closeDelay={closeDelay} render={<span className="inline-flex" />}>{children}</BaseTooltip.Trigger>}
       <BaseTooltip.Portal>
         <BaseTooltip.Positioner
           side={side}
diff --git a/web/app/components/header/account-dropdown/compliance.tsx b/web/app/components/header/account-dropdown/compliance.tsx
index 761aa90140..3841d9f0c4 100644
--- a/web/app/components/header/account-dropdown/compliance.tsx
+++ b/web/app/components/header/account-dropdown/compliance.tsx
@@ -3,6 +3,7 @@ import { useMutation } from '@tanstack/react-query'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { DropdownMenuGroup, DropdownMenuItem, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger } from '@/app/components/base/ui/dropdown-menu'
+import Tooltip from '@/app/components/base/ui/tooltip'
 import { Plan } from '@/app/components/billing/type'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import { useModalContext } from '@/context/modal-context'
@@ -17,7 +18,6 @@ import SparklesSoft from '../../base/icons/src/public/common/SparklesSoft'
 import PremiumBadge from '../../base/premium-badge'
 import Spinner from '../../base/spinner'
 import Toast from '../../base/toast'
-import Tooltip from '../../base/tooltip'
 
 const submenuTriggerClassName = '!mx-0 !h-8 !rounded-lg !px-3 data-[highlighted]:!bg-state-base-hover'
 const submenuItemClassName = '!mx-0 !h-10 !rounded-lg !py-1 !pl-1 !pr-2 data-[highlighted]:!bg-state-base-hover'
@@ -84,7 +84,7 @@ function ComplianceDocActionVisual({
   }
 
   return (
-    <Tooltip asChild={false} popupContent={tooltipText}>
+    <Tooltip popupContent={tooltipText} delay={0}>
       <PremiumBadge color="blue" allowHover={true}>
         <SparklesSoft className="flex h-3.5 w-3.5 items-center py-[1px] pl-[3px] text-components-premium-badge-indigo-text-stop-0" />
         <div className="px-1 system-xs-medium">