ShadCN Tooltips: Where is the TooltipProvider?
I have been using shadcn/ui’s Tooltip and built a wrapper called <Tooltipable>
. It just makes using tooltips easier without repeating the same boilerplate.
import { Tooltipable } from "@/components/ui/tooltipable";
<Tooltipable
content={<p>Tooltip content</p>}
trigger={<Button>Click me</Button>}
/>
Everything was working. The tooltip showed up, was positioned correctly and closed fine. But they felt weirdly slow. There was a noticeable delay before they opened, even though I didn’t touch any delay config.
What I had done wrong
Inside my <Tooltipable>
component, I wrapped each tooltip with a <TooltipProvider>
.
export const Tooltipable = ({ content, children }) => {
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>{children}</TooltipTrigger>
<TooltipContent>{content}</TooltipContent>
</Tooltip>
</TooltipProvider>
);
};
This seemed harmless at first. But when I started using more tooltips across the app, they all felt way too slow to open.
The fix
I removed <TooltipProvider>
from the component and placed it once at the root of the app.
<TooltipProvider>
<RestOfTheApp />
</TooltipProvider>
After doing that, every tooltip suddenly opened fast. I didn’t change any timing or pass any config. The only difference was where the provider was placed.
The location of <TooltipProvider>
matters. A lot. And that is not obvious from the docs.
The tooltip component works even if you do not use the provider. It also works if you use the provider incorrectly, like I did.
If you are using tooltips and they feel sluggish, check where your <TooltipProvider>
is. If it’s not at the root level, that is probably your issue. Don’t hide it inside wrapper components. Keep it high up in the tree and your UI will feel way better.