Component

Tooltip

Add concise supporting context to a focusable control without replacing its accessible name.

Usage

Import the component entry and start with its smallest complete example.

Import

import { Tooltip } from "@chitrank2050/monoline-ui/tooltip"

Basic usage

<Tooltip.Provider>
  <Tooltip>
    <Tooltip.Trigger asChild><Button>Copy</Button></Tooltip.Trigger>
		<Tooltip.Content side="top">Copy install command</Tooltip.Content>
  </Tooltip>
</Tooltip.Provider>

Usage guidance

Choose the component for its interaction model and semantics before customizing its appearance.

Use when

Tooltip adds a short explanation to a focusable control when the interface cannot show that supporting context persistently.

Avoid when

The text is essential, interactive, lengthy, or being used instead of a control's accessible name.

Accessibility

Tooltip opens for pointer and keyboard focus and closes on Escape. The trigger must remain focusable and understandable without relying on the tooltip alone.

Client Component

This component needs browser JavaScript for state or browser APIs.

API reference

Props, slots, and callbacks available on this component.

Tooltip.Providercompound slotShares delay behavior across tooltips

Tooltip.Triggercompound slotFocusable element that opens the tooltip

Tooltip.Contentcompound slotSupporting text rendered in a portal

delayDurationnumberDelay before pointer-triggered opening

side"top" | "right" | "bottom" | "left"Preferred placement; flips automatically when space is limited

align"start" | "center" | "end"Alignment along the chosen side

collisionBoundaryElement | Element[]Optional clipping boundary; defaults to the viewport

collisionPaddingnumber | SideObjectMinimum space from the collision boundary; defaults to 12px

Design tokens

Theme variables this component reads for color, spacing, and motion.

--primaryCSS varTooltip surface

--borderCSS varTooltip boundary

--shadow-mdCSS varFloating elevation

--z-tooltipCSS varOverlay order

Implementation

The source used by the example above, including any state it needs.

<Tooltip.Provider>
  <Tooltip>
    <Tooltip.Trigger asChild><Button>Copy</Button></Tooltip.Trigger>
		<Tooltip.Content side="top">Copy install command</Tooltip.Content>
  </Tooltip>
</Tooltip.Provider>

Compare related components or review the package and theme setup.

01ComponentPopoverComponent · ReferenceReference→02ComponentButtonComponent · ReferenceReference→03SetupInstall Monoline UISetup · GuideGuide→04ThemeTailwind CSS v4 design tokensTheme · FoundationsFoundations→

Interactive preview