refactor(tooltip): support per-instance delay and apply in compliance menu

This commit is contained in:
yyh 2026-03-02 17:54:59 +08:00
parent 5c278d99d4
commit f83f84afac
No known key found for this signature in database
2 changed files with 8 additions and 4 deletions

View File

@ -14,6 +14,8 @@ export type TooltipProps = {
popupClassName?: string popupClassName?: string
noDecoration?: boolean noDecoration?: boolean
offset?: number offset?: number
delay?: number
closeDelay?: number
} }
const Tooltip = React.memo(({ const Tooltip = React.memo(({
@ -24,6 +26,8 @@ const Tooltip = React.memo(({
popupClassName, popupClassName,
noDecoration, noDecoration,
offset = 8, offset = 8,
delay,
closeDelay,
}: TooltipProps) => { }: TooltipProps) => {
const { side, align } = parsePlacement(position) const { side, align } = parsePlacement(position)
@ -33,8 +37,8 @@ const Tooltip = React.memo(({
return ( return (
<BaseTooltip.Root> <BaseTooltip.Root>
{React.isValidElement(children) {React.isValidElement(children)
? <BaseTooltip.Trigger render={children} /> ? <BaseTooltip.Trigger delay={delay} closeDelay={closeDelay} render={children} />
: <BaseTooltip.Trigger render={<span className="inline-flex" />}>{children}</BaseTooltip.Trigger>} : <BaseTooltip.Trigger delay={delay} closeDelay={closeDelay} render={<span className="inline-flex" />}>{children}</BaseTooltip.Trigger>}
<BaseTooltip.Portal> <BaseTooltip.Portal>
<BaseTooltip.Positioner <BaseTooltip.Positioner
side={side} side={side}

View File

@ -3,6 +3,7 @@ import { useMutation } from '@tanstack/react-query'
import { useCallback } from 'react' import { useCallback } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { DropdownMenuGroup, DropdownMenuItem, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger } from '@/app/components/base/ui/dropdown-menu' 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 { Plan } from '@/app/components/billing/type'
import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants' import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
import { useModalContext } from '@/context/modal-context' 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 PremiumBadge from '../../base/premium-badge'
import Spinner from '../../base/spinner' import Spinner from '../../base/spinner'
import Toast from '../../base/toast' 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 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' 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 ( return (
<Tooltip asChild={false} popupContent={tooltipText}> <Tooltip popupContent={tooltipText} delay={0}>
<PremiumBadge color="blue" allowHover={true}> <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" /> <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"> <div className="px-1 system-xs-medium">