Blog

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.

🔗 Related Posts