Problems with Tooltip component sizing and mobile experience

[zanzlender]

I encountered some problems while working with the Tooltip component and wanted to ask here first if this is a bug or not.

Describe the bug

I have 2 problems with the Tooltip component so I will list them all here to get your feedback.

1. Tooltip doesn't respect the size of the window

If the content inside the tooltip is wider than the window, instead of taking up the whole width of the window it overflows.

2024-07-12-16-10-45.mp4

I tried putting max-width on all components but it didn't work, only width is respected.

2. Mobile experience does not work

On mobile, I would expect that the tooltip would open when you click on it and close if you click outside of it. Currently it appears for a second then disappears somewhere.

2024-07-12-16-13-10.mp4

---

On a different, but related topic. Am I using tooltip correctly here? Should I be using another component for this?

How to reproduce

Create a tooltip and add a text that would be longer than the window for 1,

Stackblitz link

https://stackblitz.com/edit/stackblitz-starters-nwrdyp?file=app%2Fpage.tsx

System info

Operating System:
Platform: win32
Arch: x64
Version: Windows 10 Pro
Available memory (MB): 32621
Available CPU cores: 16
Binaries:
Node: 20.9.0
npm: N/A
Yarn: N/A
pnpm: N/A
Relevant Packages:
next: 14.2.4 // There is a newer version (14.2.5) available, upgrade recommended!
eslint-config-next: 14.2.4
react: 18.3.1
react-dom: 18.3.1
typescript: 5.5.3
Next.js Config:
output: N/A

Browser: Google Chrome Version 126.0.6478.127 (Official Build) (64-bit)

[zanzlender]

Before someone else jumps in, regarding my question on "should I use this" I found that a better approach would be to use a hover card (#2417), although the hover card does not work on mobile

However, even with this, I still think these 2 are a problem for a tooltip...

[zanzlender]

Update 2.

For some reason it didn't work before but now I found that adding TooltipContent classname like: w-full max-w-[90vw] md:max-w-[600px] does the trick and it works!

The updated example is in StackBlitz.

However, the mobile experience is still an issue.

[zanzlender]

Final update,

I found this problem in the RadixUI discussion radix-ui/primitives#955 (comment)

It is so by design