A concise hover and focus explanation positioned above or below its trigger.
TopBottomKeyboard focus
Latest validated metrics value
<Tooltip content="Last synced 2 minutes ago">...</Tooltip>Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { Tooltip } from '@chanrg/4ui';<Tooltip content="Last synced 2 minutes ago">...</Tooltip>API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
content | string | required | Tooltip text. |
placement | top | bottom | top | Preferred side. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
Accessibility
- Appears for pointer hover and keyboard focus.