Tooltip positioning doesn't work within a CSS container query

[linden-dg]

Bug report

Current Behavior

When a Tooltip (i.e. Root, Trigger, and Content) is placed inside a div with the CSS container-type: inline-size then the Tooltip Content isn't properly positioned (it's positioned way off to the side).

However if the Tooltip Content is placed inside a Tooltip Portal, then it is properly positioned adjacent to the Trigger.

Expected behavior

The Tooltip Content should always appear adjacent to the Trigger

Reproducible example

Example on StackBlitz

Suggested solution

Either have the Content positioning work with container queries regardless of whether the Tooltip Portal is used, or make it clear in the documentation that the Portal is required when nesting inside CSS container queries.

Additional context

Your environment

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-tooltip	1.1.2
React	n/a	18.3.1
Browser	Chrome	129.0.6668.59
Assistive tech	n/a
Node	n/a	20 & 22
npm/yarn	npm & pnpm
Operating System	Win	11

[meszarosdezso]

I believe this is related to this breaking change in chromium, which was the result of this change in the CSS specification. The change also broke I think every floating radix-ui element inside a container without using Portal.

I am not sure if the radix-ui team can do anything to fix this (because the change broke the usage, not the library), but you can try adding position: relative or contain: layout to your container element as mentioned in the linked comment. (Edit: using contain: layout or contain-layout in tailwind fixed it in our app.)

Using Portal works, because it "moves out" the tooltip element from inside of the container and by default attaches it to the body.

[erosnicolau]

This didn't work on my side, but moving the Content inside a Portal did.

but you can try adding position: relative or contain: layout to your container element as mentioned in the linked comment.

[noah-wardlow]

moving inside a portal also works for me!

[AzrizHaziq]

Works for me

   <CardHeader
      className='flex flex-row items-center gap-2 flex-wrap @container/header space-y-0'
      style={{ contain: 'layout' }} <-----
    >
      <TooltipProvider>
        <Tooltip>
          <TooltipTrigger asChild>
            <Button variant='outline'>Hover</Button>
          </TooltipTrigger>
          <TooltipContent>
            <p>Add to library</p>
          </TooltipContent>
        </Tooltip>
      </TooltipProvider>
      </CardHeader>
      ```

[ozgurozalp]

A solution should be provided by radix ui

[simonc]

@AzrizHaziq Thank you for the workaround ❤

Quick note, if you want to remain in Tailwind's land, you can use className="...... [contain:layout]" and it does the same 😊

[dbondarchuk]

@simonc thanks, can confirm that @container [contain:layout] fixes the issue!

[Wicket-15-drunk4]

@dbondarchuk https://clement-monitor.github.io/xzrW6LiPCWyMfXUsKL6Ka-ocWw0/