Tooltip

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

Documentation API Reference

Basic Usage

Wrap your trigger element with Tooltip, TooltipTrigger, and TooltipContent components.

import { Tooltip, TooltipTrigger, TooltipContent, Button } from "@epilot/volt-ui"

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button size="icon" variant="tertiary"><IconCopy /></Button>
    </TooltipTrigger>
    <TooltipContent>
      content
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

Positioning

Control the tooltip position using the side prop on TooltipContent. Available positions are top, right, bottom, and left.

import { Tooltip, TooltipTrigger, TooltipContent, Button } from "@epilot/volt-ui"

<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="secondary">Top</Button>
  </TooltipTrigger>
  <TooltipContent side="top">
    content
  </TooltipContent>
</Tooltip>

Variant

Control the visual style variant of the tooltip using the variant prop. Available variants are default and destructive.

import { Tooltip, TooltipTrigger, TooltipContent, Button } from "@epilot/volt-ui"

<Tooltip>
  <TooltipTrigger asChild>
    <Button size="icon" destructive><IconAlertTriangle /></Button>
  </TooltipTrigger>
  <TooltipContent variant="destructive">
    content
  </TooltipContent>
</Tooltip>

Custom Delay

Customize the delay duration before the tooltip appears by passing delayDuration directly to the Tooltip component.

import { Tooltip, TooltipProvider, TooltipTrigger, TooltipContent, Button } from "@epilot/volt-ui"

<Tooltip delayDuration={2000}>
  <TooltipTrigger asChild>
    <Button variant="tertiary">Delayed tooltip</Button>
  </TooltipTrigger>
  <TooltipContent>
    <p>This tooltip appears after 2 seconds</p>
  </TooltipContent>
</Tooltip>

API Reference

The root component that wraps the tooltip trigger and content. Automatically includes a TooltipProvider.

Prop	Type	Default	Description
`open`	boolean	-	Controlled open state of the tooltip.
`defaultOpen`	boolean	`false`	Uncontrolled default open state.
`onOpenChange`	(open: boolean) => void	-	Callback fired when the open state changes.
`disabled`	boolean	`false`	When true, prevents the tooltip from opening.
`delayDuration`	number	`700`	The duration in milliseconds to wait before showing the tooltip.
`variant`	"default" \| "destructive"	`"default"`	The visual style variant of the tooltip.

TooltipProvider

Provides context and global configuration for tooltips.

Prop	Type	Default	Description
`delayDuration`	number	`700`	The duration in milliseconds to wait before showing the tooltip.
`skipDelayDuration`	number	`0`	The duration in milliseconds to wait before hiding the tooltip.

TooltipTrigger

The element that triggers the tooltip. Use asChild to merge props with a child element.

Prop	Type	Default	Description
`asChild`	boolean	`false`	When true, merges props with the child element instead of rendering a button.

TooltipContent

The content container for the tooltip. Includes animations and an arrow indicator.

Prop	Type	Default	Description
`side`	"top" \| "right" \| "bottom" \| "left"	"top"	The preferred side of the trigger to render against.
`sideOffset`	number	`2`	The distance in pixels from the trigger.
`align`	"start" \| "center" \| "end"	`"center"`	The preferred alignment against the trigger.
`alignOffset`	number	`0`	An offset in pixels from the "start" or "end" alignment options.
`className`	string	-	Additional CSS classes to apply to the tooltip content.
`hideArrow`	boolean	-	Whether to hide the arrow indicator.

Tooltip

On this page