Tooltip

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

Preview

Installation

Use the CLI to add this component to your project.

npx shadcn@latest add https://ui.nyxhora.com/r/tooltip.json

Usage

tsx
26 lines
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"

export const metadata = generateComponentMetadata({
    name: "Tooltip",
    description: "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
    category: "Overlay",
});


export default function MyComponent() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger>Hover</TooltipTrigger>
        <TooltipContent>
          <p>Tooltip content</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}

Examples

Positions

With Icons

Rich Content

Components

ComponentDescription
TooltipProviderWraps your app to enable tooltips
TooltipThe root component
TooltipTriggerThe element that triggers the tooltip
TooltipContentThe content of the tooltip