[bug]: Tooltip has redundant TooltipProvider based on documentation.

[jbeoris]

Describe the bug

https://github.com/shadcn-ui/ui/blob/main/apps/v4/registry/new-york-v4/ui/tooltip.tsx

The documentation for Tooltips is as follows:

import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger>Hover</TooltipTrigger>
    <TooltipContent>
      <p>Add to library</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

However, the implementation of Tooltip has a redundant TooltipProvider implemented if you follow the documentation.

function Tooltip({
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
  return (
    <TooltipProvider>
      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
    </TooltipProvider>
  )
}

This caused a significant performance hit in my application which was fixed by removing the duplicate TooltipProvider implementation on every Tooltip instance.

Affected component/components

Tooltip

How to reproduce

Implement 60 Tooltip components in a canvas application.

Codesandbox/StackBlitz link

No response

Logs

System Info

Any system (macOS). It is in the source code itself.

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[kamami]

But how do you then adjust the delayDuration?

[jbeoris]

But how do you then adjust the delayDuration?

I am pretty sure wherever you implement the TooltipProvider

[kamami]

But how do you then adjust the delayDuration?

I am pretty sure wherever you implement the TooltipProvider

So if I want to have different durations than defined in my Tooltip ShadCn component, I need to wrap every Tooltip again with a TooltipProvider as described in the documentation? If I want to have the default duration, I just can remove the unnecessary TooltipProvider wrapper as you discovered?

[jbeoris]

But how do you then adjust the delayDuration?

I am pretty sure wherever you implement the TooltipProvider

So if I want to have different durations than defined in my Tooltip ShadCn component, I need to wrap every Tooltip again with a TooltipProvider as described in the documentation? If I want to have the default duration, I just can remove the unnecessary TooltipProvider wrapper as you discovered?

The ability to have custom durations is preserved just via a different implementation. If you want to do a weird app where you have 30 different durations, then you are still able to do so. The default shouldn't be automatically creating 30 TooltipProviders for some obscure use case. Also, the parent TooltipProvider is redundant and not even necessary in the current implementation. That alone is a code smell.

[pziezio]

Regarding redundant TooltipProvider in every Tooltip that's an obvious mistake. We can create separate providers where it's justified. I can imagine different scopes of the application where there is a zero delay duration for some interactive editor and a default delay for common menu buttons etc.

What's more important I think that overriding default RadixUI delayDuration to 0 is not a good idea. A default value of 700 ms seems sensible and 0 feels way to fast.

My current implementation is just:

function TooltipProvider({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
  return <TooltipPrimitive.Provider data-slot="tooltip-provider" {...props} />;
}

Since TooltipProvider exports properties from RadixUI TooltipPrimitive.Provider we can always change the default if needed:

<TooltipProvider delayDuration={2000}>
...
</TooltipProvider>