Tooltip
Tooltip provides contextual information without disrupting the user's workflow. It supports multiple trigger events, smart positioning, and accessibility features for an inclusive experience.
Source
LLM docs
Package
Examples
4
Properties
45
Playground
Basics
Wrap a control in
Tooltip to display concise helper text on hover, focus, or touch.Loading demo…
import { Button, Tooltip } from '@plocks/ui';
export function Demo() {
return (
<Tooltip label="Invite teammates" withArrow>
<Button size="sm" variant="outline">
Invite teammates
</Button>
</Tooltip>
);
}Trigger Modes
Configure the
events prop to decide whether tooltips appear on hover, focus, or touch interactions.Loading demo…
import { Button, Row, Tooltip } from '@plocks/ui';
export function Demo() {
return (
<Row gap="md" wrap="wrap">
<Tooltip label="Default hover and focus behavior">
<Button size="sm">Hover or focus</Button>
</Tooltip>
<Tooltip
label="Only appears when the button receives focus"
events={{ hover: false, focus: true, touch: false }}
>
<Button size="sm" variant="outline">
Focus only
</Button>
</Tooltip>
<Tooltip
label="Shows on touch interactions"
events={{ hover: false, focus: false, touch: true }}
>
<Button size="sm" variant="ghost">
Touch only
</Button>
</Tooltip>
</Row>
);
}Positions
Set
position to top, bottom, left, or right to anchor the tooltip relative to its trigger.Loading demo…
import { Button, Row, Tooltip } from '@plocks/ui';
export function Demo() {
return (
<Row gap="md" justify="center" wrap="wrap">
<Tooltip label="Appears above the target" position="top" withArrow>
<Button size="sm" variant="outline">
Top
</Button>
</Tooltip>
<Tooltip label="Appears below the target" position="bottom" withArrow>
<Button size="sm" variant="outline">
Bottom
</Button>
</Tooltip>
<Tooltip label="Anchors to the left" position="left" withArrow>
<Button size="sm" variant="outline">
Left
</Button>
</Tooltip>
<Tooltip label="Anchors to the right" position="right" withArrow>
<Button size="sm" variant="outline">
Right
</Button>
</Tooltip>
</Row>
);
}Delays and Content
Tune
openDelay/closeDelay to reduce flicker. Long labels wrap on their own — use maw to move the wrap point, w for a fixed bubble, or lineClamp to truncate on purpose.Loading demo…
import { Button, Row, Tooltip } from '@plocks/ui';
export function Demo() {
return (
<Row gap="md" wrap="wrap">
<Tooltip label="Opens after 400ms" openDelay={400} closeDelay={200}>
<Button size="sm" variant="outline">
Delayed tooltip
</Button>
</Tooltip>
<Tooltip
label="This tooltip wraps across multiple lines so you can surface longer instructions without truncation."
maw={220}
withArrow
>
<Button size="sm">
Wrapped tooltip
</Button>
</Tooltip>
</Row>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources