fix(v4 tooltip): tooltip arrow overlap issue

[paaskus]

Issue

This PR addresses the issue described in #6933 where the tooltip arrow can overlap with and appear above the tooltip content, potentially obscuring parts of the text or other tooltip content. Applies to the latest <Tooltip> component based on Tailwind v4 and React 19 with the new-york style.

Problem

The tooltip arrow is implemented as a rotated square with styling that positions it in a way that can cause it to overlap with the tooltip content. Additionally, the z-index configuration allows the arrow to appear above the content, which can hide parts of the text when they overlap.

Solution

This PR simplifies the arrow implementation by:

• Removing custom styling properties that were causing positioning issues
• Letting the default Radix UI tooltip arrow behavior handle the positioning
• Ensuring proper layering so the arrow doesn't obscure the content

See this CodeSandbox for a demo of the problem and the proposed solution: https://codesandbox.io/p/devbox/shadcn-tooltip-arrow-issue-8xdqwl

Changes

• Modified the TooltipContent component to use a more appropriate sideOffset value to compensate for the removed styles (achieving the same rendered UI)
• Simplified the arrow styling to prevent overlap issues
• Maintained the original design intent while fixing the functional issue

Screenshots

1. Before: The tooltip with the arrow overlapping content
2. After: The tooltip with the arrow properly positioned without overlap

Related

Fixes #6933

[vercel]

@paaskus is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
ui	✅ Ready (Inspect)	Visit Preview	Mar 16, 2025 9:14am
v4	✅ Ready (Inspect)	Visit Preview	Mar 16, 2025 9:14am