Skip to content

[bug]: Missing tooltip arrow in component on CLI installation #7839

@MelvinManni

Description

@MelvinManni

Describe the bug

The tooltip component is missing the arrow element that appears in the documentation examples. To display the arrow, TooltipPrimitive.Arrow must be manually added to the component on CLI installation.

Documentation:
Image

Reproduced Locally:
Image

It should be noted in the documentation that the CLI installation does not come with the TooltipPrimitive.Arrow or It can be added to the Tooltip installation automatically.

Affected component/components

Tooltip

How to reproduce

  1. Install shadcn
  2. Install Tooltip and Button components
import { Button } from "@/components/ui/button"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip"

export function TooltipDemo() {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="outline">Hover</Button>
      </TooltipTrigger>
      <TooltipContent>
        <p>Add to library</p>
      </TooltipContent>
    </Tooltip>
  )
}

Codesandbox/StackBlitz link

No response

Logs

System Info

Chrome

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