Skip to content

[bug]: Tooltip arrow shown in demo but not included in docs or exports #7792

@heeba-khan

Description

@heeba-khan

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:

  1. Included in the code example here.
  2. Mentioned in the shadcn docs.
  3. 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:

  1. Expose TooltipArrow in the ShadCN tooltip exports.
  2. Or update the demo to match the code (i.e., remove the arrow visually if it's not supported).
  3. 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

  1. 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>
  1. Run the app and hover over the trigger element.

  2. Observe that no arrow is rendered, even though the ShadCN documentation demo visually shows a tooltip with an arrow.

  3. Try to add an arrow using the ShadCN exports (e.g., <Tooltip.Arrow />) — you'll find that it's not exposed.

  4. 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions