Tooltip
Contextual hint on hover/focus. Figma V8.0: Supporting text (True/False) × 7 arrow positions including None.
import
{ Tooltip } from "@pepulux/ui"Supporting text: False — all placements
Supporting text: True
Arrow: None
Open: True — controlled
open forces the tooltip visible (Figma Open=True). Leave it undefined for hover and focus behaviour.
This is a tooltip
Help icon
help-circle with a tooltip. Figma Tooltip: Top no arrow, Top arrow, Top left, Top right, Bottom, Right, Left × Supporting text × Open.
top-no-arrow
top-arrow
top-left
top-right
bottom
right
left
Help icon — open with supporting text
This is a tooltipTooltips are used to describe or identify an element. In most scenarios, tooltips help the user understand meaning, function or alt-text.
This is a tooltipTooltips are used to describe or identify an element. In most scenarios, tooltips help the user understand meaning, function or alt-text.
This is a tooltipTooltips are used to describe or identify an element. In most scenarios, tooltips help the user understand meaning, function or alt-text.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| content* | ReactNode | — | Primary tooltip label — Figma title text |
| supportingText | string | — | Figma Supporting text=True — secondary line below the title |
| placement | "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "right" | "top" | Figma Arrow prop — controls which side the caret appears on |
| arrow | boolean | true | Figma Arrow=None when false — hides the directional caret |
| open | boolean | — | Figma Open — controlled visibility. Undefined = show on hover/focus |
| delay | number | 200 | Hover delay before tooltip appears (ms) |
HelpIcon props
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| content* | ReactNode | — | Tooltip title |
| supportingText | string | — | Figma Supporting text=True — description under the title |
| tooltip | "top-no-arrow" | "top-arrow" | "top-left" | "top-right" | "bottom" | "right" | "left" | "top-no-arrow" | Figma Tooltip — position and arrow |
| open | boolean | — | Figma Open — force the tooltip open |
| label | string | "Help" | Accessible label for the icon button |