Tooltip should utilize portal for content

[khinshankhan]

Hello, superb library!

Because the tooltip utilizes divs, but divs aren't valid descendants of paragraphs (view this stackoverflow discussion), if someone where to use tooltip in a paragraph tag, they would get the error

Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.

Thanks to the radix discord, I suggest wrapping the content in the tooltip portal like so:

const TooltipContent = React.forwardRef<
  React.ElementRef<typeof TooltipPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
  <TooltipPrimitive.Portal>
    <TooltipPrimitive.Content
      ref={ref}
      sideOffset={sideOffset}
      className={cn(
        "z-50 overflow-hidden rounded-md border border-slate-100 bg-white px-3 py-1.5 text-sm text-slate-700 shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=top]:slide-in-from-bottom-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-400",
        className
      )}
      {...props}
    />
  </TooltipPrimitive.Portal>
))
TooltipContent.displayName = TooltipPrimitive.Content.displayName

This allows the content to be rendered in a different scope, avoiding the invalid descendants issue and retaining the styling and semantics as far as I can tell.

[Dylan-Kentish]

This change also solved an issue I had where I wanted to display a tooltip within a Select, which caused the tooltip to be clipped by the bounds of the Select Content.

[dylanhu7]

@Dylan-Kentish Yes, I had the same issue.

[alivault]

This solved an issue for me where the tooltip content was being clipped by a parent with overflow-hidden. Portal should be added to the shadcn tooltip.

[daunJung-dev]

So do I, I have same problem and @khinshankhan your solution is very good for me. tooltip's content need to be exist in different layer for accessibility and visibility.

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[khinshankhan]

Well, I want to confirm if this is a bug or intentional. Other components like dropdown seem to use their respective portals.

I'm not familiar with the codebase, but if you agree it should be added, I could attempt a pr for this. Otherwise, just the existence of this issue is likely helpful for many as github has really good seo.

[michaelgrewal]

I would like to see Portal support added for shadcn, it just seems like it should be there but isn't...

[shadcn]

Agreed. Not stale. Reopening.

[nullnullsieben]

https://www.instagram.com/1900_officelle?igsh=MW5ueDI0b21qbW44Zg==

shadcn @.***> schrieb am Mo., 5. Aug. 2024, 09:14:

Reopened #129 https://github.com/shadcn-ui/ui/issues/129.

— Reply to this email directly, view it on GitHub https://github.com/shadcn-ui/ui/issues/129#event-13759369108, or unsubscribe https://github.com/notifications/unsubscribe-auth/BIO77CIC7L2S43GDMLPM67TZP4Q5BAVCNFSM6AAAAAAV7WZDAKVHI2DSMVQWIX3LMV45UABCJFZXG5LFIV3GK3TUJZXXI2LGNFRWC5DJN5XDWMJTG42TSMZWHEYTAOA . You are receiving this because you are subscribed to this thread.Message ID: @.***>