Tooltip

A short hint on hover or keyboard focus.

SourcePackage @weft-js/warpPlayground

Preview

tsx

import { Button, Tooltip } from '@weft-js/warp'export function Basic() {  return (    <Tooltip content="Runs on every region"><Button emphasis="outline" tone="neutral">Deploy everywhere</Button></Tooltip>  )}

Installation

npm install @weft-js/warp

Usage

tsx

import { Tooltip } from '@weft-js/warp'<Tooltip content="Runs on every region"><Button emphasis="outline" tone="neutral">Deploy everywhere</Button></Tooltip>

Placement

Use side to pick where it opens. With no room there, it flips.

tsx

import { Button, Tooltip } from '@weft-js/warp'export function Sides() {  return (    <>      <Tooltip content="Above" side="top"><Button emphasis="outline" tone="neutral">Top</Button></Tooltip>      <Tooltip content="Below" side="bottom"><Button emphasis="outline" tone="neutral">Bottom</Button></Tooltip>      <Tooltip content="Before" side="left"><Button emphasis="outline" tone="neutral">Left</Button></Tooltip>      <Tooltip content="After" side="right"><Button emphasis="outline" tone="neutral">Right</Button></Tooltip>    </>  )}

Alignment

Use align to line it up with its trigger.

tsx

import { Button, Tooltip } from '@weft-js/warp'export function Aligns() {  return (    <>      <Tooltip content="Lines up with the start" align="start"><Button emphasis="outline" tone="neutral">Start</Button></Tooltip>      <Tooltip content="Centred on the button" align="center"><Button emphasis="outline" tone="neutral">Center</Button></Tooltip>      <Tooltip content="Lines up with the end" align="end"><Button emphasis="outline" tone="neutral">End</Button></Tooltip>    </>  )}

With a shortcut

kbd draws a key beside the words.

tsx

import { Button, Tooltip } from '@weft-js/warp'export function Shortcut() {  return (    <Tooltip content="Search commands" kbd="⌘K"><Button emphasis="outline" tone="neutral" icon="search" label="Search" /></Tooltip>  )}

Saying why it is disabled

Use aria-disabled: a truly disabled button can't be focused or hovered.

tsx

import { Button, Tooltip } from '@weft-js/warp'export function WhyDisabled() {  return (    <Tooltip content="Only owners can delete a project"><Button tone="critical" aria-disabled="true">Delete project</Button></Tooltip>  )}

An icon toolbar

Use content for the tip and kbd to show the shortcut beside it.

tsx

import { Button, Row, Tooltip } from '@weft-js/warp'export function IconBar() {  return (    <Row gap="tight">      <Tooltip content="Redeploy" kbd="R"><Button emphasis="ghost" tone="neutral" icon="rocket" label="Redeploy" /></Tooltip>      <Tooltip content="Open logs" kbd="L"><Button emphasis="ghost" tone="neutral" icon="external" label="Open logs" /></Tooltip>      <Tooltip content="Copy commit" kbd="C"><Button emphasis="ghost" tone="neutral" icon="copy" label="Copy commit" /></Tooltip>      <Tooltip content="Delete"><Button emphasis="ghost" tone="critical" icon="trash" label="Delete" /></Tooltip>    </Row>  )}

Why a row failed

Use side to choose which edge the tip opens on, here left.

tsx

import { Badge, Button, Row, Text, Tooltip } from '@weft-js/warp'export function StatusRow() {  return (    <Row justify="between" gap="group">      <Text>mobile-bff</Text>      <Row gap="tight">        <Badge tone="critical" dot>Failed</Badge>        <Tooltip content="Retry timed out upstream calls" side="left"><Button size="sm" emphasis="ghost" tone="neutral" icon="info" label="Why it failed" /></Tooltip>      </Row>    </Row>  )}

When to use

Use it for

Naming an icon button
Showing the shortcut for an action

Reach for something else

Popover, when it holds anything to press, or more than a few words

Playground

Content

Side

topbottomleftright

Kbd

import { Tooltip } from '@weft-js/warp'<Tooltip content="Runs on every region" kbd="⌘D">  <Button emphasis="outline" tone="neutral">Hover or focus me</Button></Tooltip>

Accessibility

Tab: Focusing the trigger shows it
Esc: Hides it

Never put anything essential in a tooltip: touch has no hover.
The tip describes its trigger, unless the trigger's name already says the same words.
The trigger must be one focusable element.

API Reference

Prop	Type	Default	Description
`content`	`string`	—	The words. Plain text only.
`kbd`	`string`	—	A key hint beside the words.
`side`	`Side`	—	Which side it opens on.
`align`	`Align`	—	How it lines up with its trigger.
`inline`	`boolean`	`false`	Shows the tip under its trigger, in the page's flow, without waiting for hover. For docs and previews.
`children`	`unknown`	—	The trigger: one focusable element.

Parts

Every element carries a stable name, so you can style it from your own CSS: [data-scope="tooltip"] [data-part="content"]

content

RelatedPopover Button Kbd