Actions & Overlays

Tooltip

A text hint shown on hover and focus.

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

A text hint shown on hover and focus, wired with role="tooltip" and aria-describedby. The CSS baseline reveals the tip on the trigger's :hover/:focus-visible with no JavaScript. The enhancer promotes the tip to a popover="manual" so it renders in the top layer above any clipping ancestor, adds show/hide delays and a grace period for crossing onto the tip, and dismisses on Esc from anywhere.

Tooltip

Hover or focus the trigger. Focus shows it immediately; hover waits a beat. Press Esc to dismiss.

Live

Helpful tooltip text.

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(document);
// 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
content*	string	Not set	The tooltip text.
placement	Placement	'top'	Preferred side relative to the trigger.
showDelay	number	150	Delay in ms before showing on hover. Focus shows immediately.
hideDelay	number	100	Grace period in ms before hiding, so the pointer can reach the tip.
open	boolean	Not set	Controlled visibility; pair with `onOpenChange` (Vue: `v-model:open`, Svelte: `bind:open`).
onOpenChange	(open: boolean) => void	Not set	Called after the tooltip shows or hides.

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-surface	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 (WCAG 1.4.13).
• The tip is popover="manual" while enhanced, so it is never light-dismissed while the pointer is on the trigger.

Related

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