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

Usage rulesTheme previews

Installation

npm

npm install @rcarls/rc-webcomponents@next

Yarn

yarn add @rcarls/rc-webcomponents@next

pnpm

pnpm add @rcarls/rc-webcomponents@next

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

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.

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.