Actions & Overlays

Tooltip

A text hint shown on hover and focus.

stableEnhancer: enhanceTooltipBuilt on [role="tooltip"]hydrateless/tooltip.css

A text hint shown on hover and focus, wired with role="tooltip" and aria-describedby. The enhancer toggles visibility and dismisses on Esc.

Tooltip

Hover or focus the trigger. Focus shows it immediately; hover waits a beat.

Live

JavaScript

This component ships an optional enhancer. With auto-init it loads automatically; to wire it yourself, import it directly:

import { enhanceTooltip } from '@hydrateless/enhancers/tooltip';

const handle = enhanceTooltip(container, { placement, showDelay, hideDelay });
// handle.api  -> imperative controls
// handle.destroy()  -> tear everything down

Props

The framework bindings expose these props (and forward the rest to the root element).

Prop	Type	Default	Description
label*	string	—	The tooltip text.
placement	string	'top'	Preferred side relative to the trigger.

CSS variables

Override these on any ancestor to theme the component. See the theme studio to preview changes live.

CSS variable	Used for
--hl-fg	Tooltip background (inverted surface).
--hl-bg	Tooltip text color.
--hl-radius-sm	Corner radius.

Accessibility

• The trigger is linked to the tip with aria-describedby, so it is announced on focus.
• Focus reveals the tip instantly; Esc dismisses it without moving focus.

Related

PopoverFloating content anchored to a trigger.KbdA styled keyboard key for documenting shortcuts.