Tooltip

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

Preview Code
Interactive

Features

  • Provider to control display delay globally.
  • Opens when the trigger is focused or hovered.
  • Closes when the trigger is activated or when pressing escape.
  • Supports custom timings.
  • Collision-aware positioning.

Installation

Install the component from your command line.

Angular CLInpmpnpmyarnbun
Bash
ng g @ng-cn/core:c tooltip

Anatomy

Import all parts and piece them together.

Typescript
import {
  TooltipProvider,
  Tooltip,
  TooltipTrigger,
  TooltipContent
} from '@/ui/tooltip';
Html
<TooltipProvider>
  <Tooltip>
    <TooltipTrigger />
    <TooltipContent />
  </Tooltip>
</TooltipProvider>

API Reference

Provider

Wraps your app to provide global functionality to your tooltips.

PropTypeDefault
delayDuration number 700
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 TooltipContent from remaining open when hovering. Disabling this has accessibility consequences.

Root

Contains all the parts of a tooltip.

PropTypeDefault
open boolean —
The controlled open state of the tooltip.
defaultOpen boolean false
The open state of the tooltip when initially rendered. Use when you do not need to control its open state.
delayDuration number 700
Override the provider delay duration for this tooltip.
disableHoverableContent boolean —
Override the provider setting for this tooltip.

Trigger

The button that toggles the tooltip.

PropTypeDefault
asChild boolean false
Change the component to the HTML tag or custom component provided as the child.
class string —
Additional CSS classes to apply.

Data Attributes

AttributeValues
[data-state]"open" | "closed"

Content

The component that pops out when the tooltip is open.

PropTypeDefault
side 'top' | 'right' | 'bottom' | 'left' 'top'
The preferred side of the trigger to render against when open.
sideOffset number 4
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.
avoidCollisions boolean true
When true, overrides the side and align preferences to prevent collisions with boundary edges.
class string —
Additional CSS classes to apply.

Data Attributes

AttributeValues
[data-state]"open" | "closed"
[data-side]"top" | "right" | "bottom" | "left"
[data-align]"start" | "center" | "end"

Examples

Basic

A simple tooltip on a button.

Html
<TooltipProvider>
  <Tooltip>
    <TooltipTrigger>
      <Button variant="outline">Hover me</Button>
    </TooltipTrigger>
    <TooltipContent>
      <p>Add to library</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

With custom delay

Override the default delay duration.

Html
<TooltipProvider [delayDuration]="0">
  <Tooltip>
    <TooltipTrigger>
      <Button variant="outline">Instant tooltip</Button>
    </TooltipTrigger>
    <TooltipContent>
      <p>Shows immediately!</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

Different positions

Position the tooltip on different sides.

Html
<TooltipProvider>
  <div class="flex gap-4">
    <Tooltip>
      <TooltipTrigger><Button>Top</Button></TooltipTrigger>
      <TooltipContent side="top">Top tooltip</TooltipContent>
    </Tooltip>

    <Tooltip>
      <TooltipTrigger><Button>Right</Button></TooltipTrigger>
      <TooltipContent side="right">Right tooltip</TooltipContent>
    </Tooltip>

    <Tooltip>
      <TooltipTrigger><Button>Bottom</Button></TooltipTrigger>
      <TooltipContent side="bottom">Bottom tooltip</TooltipContent>
    </Tooltip>

    <Tooltip>
      <TooltipTrigger><Button>Left</Button></TooltipTrigger>
      <TooltipContent side="left">Left tooltip</TooltipContent>
    </Tooltip>
  </div>
</TooltipProvider>

Controlled

Control the open state programmatically.

Html
// In your component:
isOpen = signal(false);

// In template:
<TooltipProvider>
  <Tooltip [open]="isOpen()" (openChange)="isOpen.set($event)">
    <TooltipTrigger>
      <Button>Controlled tooltip</Button>
    </TooltipTrigger>
    <TooltipContent>
      <p>This tooltip is controlled</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

<Button (click)="isOpen.set(true)">Show tooltip</Button>

Accessibility

Adheres to the Tooltip WAI-ARIA design pattern .

Keyboard Interactions

KeyDescription
Tab Opens/closes the tooltip when trigger receives/loses focus.
Escape Closes the tooltip immediately.