shadcnui

How to change the delay duration of a Shadcn Tooltip?

Is there a way to change the delay duration of the Shadcn Tooltip component?

I'd like to change it so that the tooltip appears after 100ms.

Solution

  • Found the answer in a Github comment by bent101.

    You can use the delayDuration prop on TooltipProvider:

    <TooltipProvider delayDuration={100}>
    <Tooltip>
        ...
    </Tooltip>
</TooltipProvider>

    If you want to set a delay value globally, you can update the tooltip file itself. Just replace

    const TooltipProvider = TooltipPrimitive.Provider

    with

    interface TooltipProviderProps {
  children: React.ReactNode
  delayDuration?: number
}

const TooltipProvider: React.FC<TooltipProviderProps> = ({
  children,
  delayDuration = 100,
}) => (
  <TooltipPrimitive.Provider delayDuration={delayDuration}>
    {children}
  </TooltipPrimitive.Provider>
)