rc-tooltip
Tooltip wrapper for a consumer-owned trigger and descriptive content, following the WAI-ARIA Tooltip pattern.
- Package
@rcarls/rc-tooltip- Element
<rc-tooltip>- Native dependency
- Consumer-owned trigger and descriptive content
- State model
- Focus and pointer visibility
- Main events
- None
- Related
- Theme previews
Installation
- npm
- Yarn
npm install @rcarls/rc-webcomponents
yarn add @rcarls/rc-webcomponents
import '@rcarls/rc-webcomponents/rc-tooltip/define';
Usage
Place the trigger in the trigger slot and the descriptive text in the
content slot:
<rc-tooltip placement="block-end">
<button slot="trigger" type="button">Hover or focus me</button>
<span slot="content">This text describes the trigger.</span>
</rc-tooltip>
Live demo
Behavior and accessibility
The component adds a stable id and role="tooltip" to the content and adds
that ID to the trigger's aria-describedby list. Focus or pointer hover opens
the tooltip. It stays open while the pointer moves between the trigger and
content, and Escape dismisses it without moving focus. Tooltip content is
descriptive text and must not contain interactive controls or receive focus.
The native Popover API provides top-layer rendering where it is available.
Browsers without a working Popover API use the same interaction behavior with
the hidden attribute and the shared anchor positioning fallback. Placement is
logical, so block-* and inline-* follow writing mode and direction.
API
Properties
| Property | Markup | Type | Default | Description |
|---|---|---|---|---|
placement | placement | RCTooltipPlacement | 'block-end' | Preferred logical placement relative to the trigger. |
Methods
No public methods are documented in the custom elements manifest.
Events
No custom events are documented in the custom elements manifest.
Slots
| Name | Description |
|---|---|
trigger | The consumer-owned element that receives focus and hover behavior. |
content | The single consumer-owned element containing the tooltip text. |
default | A fallback content slot when `content` is omitted. |
CSS Custom Properties
| Property | Default | Description |
|---|---|---|
--rc-tooltip-max-inline-size | 20rem | Maximum inline size of the tooltip content. |
--rc-tooltip-padding-block | 0.25em | Tooltip block-axis padding. |
--rc-tooltip-padding-inline | 0.5em | Tooltip inline-axis padding. |
--rc-tooltip-border | 1px solid CanvasText | Tooltip border. |
--rc-tooltip-radius | var(--rc-radius-sm) | Tooltip corner radius. |
--rc-tooltip-background | CanvasText | Tooltip background. |
--rc-tooltip-color | Canvas | Tooltip text color. |
--rc-tooltip-shadow | none | Tooltip shadow. |
--rc-tooltip-font | inherit | Tooltip font. |
--rc-tooltip-line-height | normal | Tooltip line height. |
--rc-tooltip-z-index | 1 | Tooltip stacking order in the fallback mode. |
CSS Parts
| Part | Description |
|---|---|
root | The shadow-DOM wrapper containing the two slots. |