Tooltip
Contextual text popup with placement options and trigger modes.
<rhx-tooltip>
Examples
Basic
<rhx-tooltip rhx-content="Save your changes">
<rhx-button rhx-variant="brand">Save</rhx-button>
</rhx-tooltip>
<rhx-tooltip rhx-content="Delete this item permanently" rhx-placement="bottom">
<rhx-button rhx-variant="danger">Delete</rhx-button>
</rhx-tooltip>
<rhx-tooltip rhx-content="Edit settings" rhx-placement="right">
<rhx-button rhx-variant="neutral" rhx-appearance="outlined">Settings</rhx-button>
</rhx-tooltip>Placements
<rhx-tooltip rhx-content="Top tooltip" rhx-placement="top">
<rhx-button rhx-variant="neutral" rhx-appearance="outlined">Top</rhx-button>
</rhx-tooltip>
<rhx-tooltip rhx-content="Bottom tooltip" rhx-placement="bottom">
<rhx-button rhx-variant="neutral" rhx-appearance="outlined">Bottom</rhx-button>
</rhx-tooltip>
<rhx-tooltip rhx-content="Left tooltip" rhx-placement="left">
<rhx-button rhx-variant="neutral" rhx-appearance="outlined">Left</rhx-button>
</rhx-tooltip>
<rhx-tooltip rhx-content="Right tooltip" rhx-placement="right">
<rhx-button rhx-variant="neutral" rhx-appearance="outlined">Right</rhx-button>
</rhx-tooltip>Click Trigger
<rhx-tooltip rhx-content="Click to toggle this tooltip" rhx-trigger="click">
<rhx-button rhx-variant="brand" rhx-appearance="outlined">Click Me</rhx-button>
</rhx-tooltip>Disabled
<rhx-tooltip rhx-content="This tooltip is disabled" rhx-disabled="true">
<rhx-button rhx-variant="neutral">Hover (no tooltip)</rhx-button>
</rhx-tooltip>Properties
| Property | Type | Default | Description |
|---|---|---|---|
rhx-content |
string |
- |
The tooltip text |
rhx-placement |
string |
top |
Position: top, bottom, left, right |
rhx-trigger |
string |
hover |
Trigger mode: hover, click |
rhx-disabled |
bool |
false |
Whether the tooltip is disabled |
Accessibility
- Tooltip element has
role="tooltip"for assistive technology recognition. - The trigger element is linked to the tooltip via
aria-describedby. - Keyboard focus on the trigger element shows the tooltip.