-
-
Notifications
You must be signed in to change notification settings - Fork 6.4k
Description
Describe the bug
Hello!
I noticed that the Tooltip component in ShadCN UI shows a tooltip with an arrow in the documentation demo, but the arrow is neither:
- Included in the code example here.
- Mentioned in the shadcn docs.
- Exposed as part of the Tooltip wrapper.
This might confuse developers, especially those trying to replicate the demo, since the arrow visually appears in the demo but there's no way to add it using the exported components.
Since the arrow is part of the underlying @radix-ui/react-tooltip API (<Tooltip.Arrow />), would it be possible to:
- Expose TooltipArrow in the ShadCN tooltip exports.
- Or update the demo to match the code (i.e., remove the arrow visually if it's not supported).
- Or at least add a note explaining how to manually add the arrow.
Let me know if you’d like a PR for it.
Thanks for the amazing work!
Affected component/components
Tooltip
How to reproduce
- Install and set up the Tooltip component using the example code from the ShadCN UI documentation.
import {
Tooltip,
TooltipTrigger,
TooltipContent,
} from "@/components/ui/tooltip"
import { Button } from "@/components/ui/button"
<Tooltip>
<TooltipTrigger asChild>
<Button variant="outline">Hover</Button>
</TooltipTrigger>
<TooltipContent>Add to library</TooltipContent>
</Tooltip>
-
Run the app and hover over the trigger element.
-
Observe that no arrow is rendered, even though the ShadCN documentation demo visually shows a tooltip with an arrow.
-
Try to add an arrow using the ShadCN exports (e.g., <Tooltip.Arrow />) — you'll find that it's not exposed.
-
Only way to add the arrow is by manually importing it from @radix-ui/react-tooltip, which is not documented or explained anywhere in the ShadCN UI docs or component source.
Codesandbox/StackBlitz link
No response
Logs
System Info
Package: @shadcn/ui
Tooltip dependency: @radix-ui/react-tooltip
Browser: Chrome Version 138.0.7204.97 (Official Build) (64-bit)
Framework: React 18.3.1
Node.js version: 24.1.0
OS: Windows 11 WSL Ubuntu 24.04.2 LTS
Package manager: npm
Before submitting
- I've made research efforts and searched the documentation
- I've searched for existing issues