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