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, onOpenChange });
// 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.

Events and callbacks

Event / Callback	Payload	Description
hl:open-change	{ open: boolean }	Fires after the tooltip shows or hides (also the `onOpenChange` callback).

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.