Hewn
Components

Components

Tooltip

Short contextual hint anchored to a trigger on hover or focus.

newfree

Install

@hewnui/ui · hewnui

Terminal
npm install @hewnui/ui
Terminal
pnpm add @hewnui/ui
Terminal
yarn add @hewnui/ui
Terminal
bun add @hewnui/ui
Terminal
npx hewnui@latest add tooltip

Built on React Aria TooltipTrigger and Tooltip. Prefer for brief labels; use Popover when the content needs a title or actions.

Usage

TSX
import { Button, Tooltip, TooltipTrigger } from "@hewnui/ui";

<TooltipTrigger>
  <Button>Help</Button>
  <Tooltip>Keyboard shortcut</Tooltip>
</TooltipTrigger>

Placement

Defaults to top. Pass placement for other overlay sides.

Accessibility

  • Appears on hover and keyboard focus
  • Exposed with role="tooltip"
  • Delay defaults to 400ms; demos often use a shorter delay

API reference

Props for Tooltip from @hewnui/ui/tooltip. Generated from component types — not hand-written.

Prop

Type

Popover

Anchored content panel for short explanations without a modal layer.

Menu

Action menu triggered from a button.

On this page

UsagePlacementAccessibility