Tooltip

Overview

Use Tooltip to provide a short hint for an element.

Tooltips are useful for icon-only buttons, truncated labels, unfamiliar controls, and brief extra context. Do not use tooltips for information that is required to complete a task.

Anatomy

A tooltip has a trigger and popup content. The content should be short, usually one sentence or phrase.

Behavior

Tooltips appear on hover or focus. They should not contain interactive controls because users may not be able to reach them reliably.

Accessibility

The trigger should make sense without the tooltip when possible. For icon-only controls, also provide an accessible name.

Installation

npx love-ui@latest add tooltip

Usage

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

<Tooltip>
  <TooltipTrigger render={<Button variant="outline" />}>
    Hover me
  </TooltipTrigger>
  <TooltipPopup>Helpful hint</TooltipPopup>
</Tooltip>

Grouping Tooltips

To group multiple tooltips so they appear instantly after the first one is opened, wrap them in TooltipProvider. The grouping logic ensures that once a tooltip becomes visible, the adjacent tooltips will be shown instantly.

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger render={<Button variant="outline" />}>
      Tooltip 1
    </TooltipTrigger>
    <TooltipPopup>Content 1</TooltipPopup>
  </Tooltip>
  <Tooltip>
    <TooltipTrigger render={<Button variant="outline" />}>
      Tooltip 2
    </TooltipTrigger>
    <TooltipPopup>Content 2</TooltipPopup>
  </Tooltip>
</TooltipProvider>

Examples

The example shows grouped tooltips for related controls.

Grouped Tooltips