Tooltip

PreviousNext

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Component tooltip-demo not found in registry.

Installation

pnpm dlx shadcn@latest add tooltip

Usage

import * as Tooltip from "@/components/ui/tooltip"
<Tooltip.Provider>
  <Tooltip.Root>
    <Tooltip.Trigger asChild>
      <button>Hover me</button>
    </Tooltip.Trigger>
    <Tooltip.Content>
      <p>This is a tooltip</p>
    </Tooltip.Content>
  </Tooltip.Root>
</Tooltip.Provider>

Examples

Dark Variant

Component tooltip-variants not found in registry.

Appearances

Component tooltip-appearances not found in registry.

Sizes

Component tooltip-sizes not found in registry.

Positions

Component tooltip-positions not found in registry.

Without Arrow

Component tooltip-without-arrow not found in registry.

Delay

Component tooltip-delay not found in registry.