Tooltip

A tooltip component built on top of Radix UI Tooltip.

Installation

npx shadcn@latest add tooltip

Usage

import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip"

<TooltipProvider>
<Tooltip>
  <TooltipTrigger>Hover</TooltipTrigger>
  <TooltipContent>
    <p>Add to library</p>
  </TooltipContent>
</Tooltip>
</TooltipProvider>

Examples

Default

import { Button } from "@/components/xfork-ui/button"
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip"
export default function TooltipDemo() {
return (
  <TooltipProvider>
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="outline">Hover</Button>
      </TooltipTrigger>
      <TooltipContent>
        <p>Add to library</p>
      </TooltipContent>
    </Tooltip>
  </TooltipProvider>
)
}

Props

Tooltip

Extends React.ComponentProps<typeof TooltipPrimitive.Root>

| Prop | Type | Default | Description | | :-- | :-- | :-- | :-- | | defaultOpen | boolean | false | The open state of the tooltip when it is initially rendered. | | open | boolean | undefined | The controlled open state of the tooltip. | | onOpenChange | (open: boolean) => void | undefined | Event handler called when the open state of the tooltip changes. |

TooltipTrigger

Extends React.ComponentProps<typeof TooltipPrimitive.Trigger>

TooltipContent

Extends React.ComponentProps<typeof TooltipPrimitive.Content>

| Prop | Type | Default | Description | | :-- | :-- | :-- | :-- | | sideOffset | number | 0 | The distance in pixels from the trigger. | | align | "start" \| "center" \| "end" | "center" | The preferred alignment against the trigger. | | side | "top" \| "right" \| "bottom" \| "left" | "top" | The preferred side of the trigger to render against. |

TooltipProvider

Extends React.ComponentProps<typeof TooltipPrimitive.Provider>

| Prop | Type | Default | Description | | :-- | :-- | :-- | :-- | | delayDuration | number | 0 | The duration from when the mouse enters a tooltip trigger until the tooltip opens. | | skipDelayDuration | number | 300 | How much time a user has to enter another trigger without incurring a delay again. | | disableHoverableContent | boolean | false | Prevents the content from remaining open when hovering. |