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>
    )