[bug]: Tooltip with overflow causes scroller to be shown for a brief moment.

[jhrinoa]

Describe the bug

This seems an issue with Radix itself, but I am going to report here as well.
There are 4 conditions for this issue to occur:

1. Tooltip with Arrow
2. Animate
3. Overflow-auto
4. Tooltip gets display on top of anchor

When this condition is met, you will see a scroller being displayed while animation is in progress.
Then the scroller disappears when animation is complete.

Affected component/components

Tooltip

How to reproduce

1. Go to https://v0.dev/chat/WeFCqApwjid?b=b_v8qvEjewqG9
2. Hover your mouse on "Hover" text for a second.

If above link doesn't work, copy paste following to reproduce the issue.

import * as TooltipPrimitive from "@radix-ui/react-tooltip"
 
import { cn } from "@/lib/utils"
 
const TooltipProvider = TooltipPrimitive.Provider
 
const Tooltip = TooltipPrimitive.Root
 
const TooltipTrigger = TooltipPrimitive.Trigger
 
const TooltipContent = React.forwardRef<
  React.ElementRef<typeof TooltipPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
  <TooltipPrimitive.Content
    ref={ref}
    sideOffset={sideOffset}
    className={cn(
      "z-50 overflow-auto rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
      className
    )}
    {...props}
  />
))

export function TooltipDemo() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger>Hover</TooltipTrigger>
        <TooltipContent>
          <p>Add to library</p>
          <TooltipPrimitive.Arrow />
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}

Basically, I just added overflow-auto to TooltipContent and added TooltipPrimitive.Arrow in the demo code.

Screen.Recording.2025-01-02.at.6.18.08.PM.mov

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

Used MacOS
Chrome and Safari

Before submitting

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

[ghost]

You know what type of person has overflow? fat black trans women. have you tried racemixing?