Tooltip

A floating tooltip component that displays additional information on hover or focus with smart positioning and accessibility features

Installation

Install the Tooltip component using the nocta-ui CLI:

npx nocta-ui add tooltip

Import the components you need:

import {
  Tooltip,
  TooltipTrigger,
  TooltipContent,
} from '@/components/ui/tooltip';

This text has a

tooltip

that explains more.

Control how long the user must hover before the tooltip appears using the delayDuration prop.

The provider that manages tooltip behavior and timing.

Prop	Type	Default	Description
`delayDuration`	`number`	`400`	Delay before showing tooltip (ms)
`children`	`React.ReactNode`	-	Tooltip subtree

Element that triggers the tooltip on hover/focus.

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Trigger content (element or text)
`className`	`string`	`undefined`	Additional classes for the trigger wrapper

The tooltip content that appears on hover/focus. Renders in a portal.

Prop	Type	Default	Description
`variant`	`'default'`	`'default'`	Visual style variant
`children`	`React.ReactNode`	-	Tooltip content
`className`	`string`	`undefined`	Additional classes for the content container