ShadCN Tooltips: Where is the TooltipProvider?

I’ve 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>} 
/>Copy

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>
  );
};Copy

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

After doing that, every tooltip suddenly opened fast. I did not change any timing or pass any config. The only difference was where the provider was placed.

What this tells me

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. But in both cases, the result feels off. The default behavior becomes too slow, and you probably won’t notice why unless you are actively looking.

Final thoughts

If you are using tooltips and they feel sluggish, check where your TooltipProvider is. If it is not at the root level, that is probably your issue. Do not hide it inside wrapper components. Keep it high up in the tree and your UI will feel way better.