Tooltip
StableShows additional context on hover (with configurable delay) and on keyboard focus (no delay). Wraps the trigger via cloneElement — no Trigger sub-component needed.
OverlayVhyxSeal
Interactive example
Hover or focus the button to see the tooltip
Import
tsx
import { Tooltip } from '@vhyxui/react'Sides
top, right, bottom, left
States
Icon-only button — tooltip provides the accessible name
99
Tooltip on Badge
Props
| Prop | Type | Default | Description |
|---|---|---|---|
content * | React.ReactNode | — | The tooltip content. |
side | 'top' | 'right' | 'bottom' | 'left' | 'top' | Which side the tooltip appears on. |
align | 'start' | 'center' | 'end' | 'center' | Alignment along the side axis. |
delayDuration | number | 400 | Milliseconds before showing on hover. |
skipDelayDuration | number | 300 | Milliseconds grace period before re-showing after cursor leaves. |
children * | React.ReactElement | — | The trigger element. Tooltip attaches via cloneElement. |
Accessibility
-
role="tooltip"on the tooltip element. - Trigger receives
aria-describedbypointing to the tooltip when visible. - Shows on keyboard focus without delay — keyboard users are not penalized.
- Rendered in a portal — not clipped by overflow containers.
- Use
aria-labelon the trigger for interactive meaning; tooltip provides supplemental description only.
Keyboard navigation
| Key | Action |
|---|---|
| Focus | Show tooltip immediately (no delay on keyboard focus). |
| Blur | Hide tooltip. |
| Escape | Hide tooltip while trigger is focused. |
Agent contract
Default VhyxSeal contract shipped with every Tooltip.
Default contract
{
"type": "display",
"intent": "display-tooltip",
"description": "Shows supplementary information about a trigger element on hover or focus",
"requires": [],
"requiredPermissions": [],
"consequence": "None — display only. Hides on mouse leave, blur, or Escape.",
"affects": [],
"reversible": false,
"safetyLevel": "low",
"requiresConfirmation": false,
"destructive": false,
"contractVersion": "0.0.1",
"fingerprint": "vhyxs_12155bf5"
}Theming
Override these CSS tokens to theme Tooltip.
--vhyx-z-tooltipZ-index (550)
--vhyx-color-bg-inverseTooltip background
--vhyx-color-text-inverseTooltip text color
--vhyx-radius-smBorder radius
--vhyx-duration-fastFade-in duration
--vhyx-easing-decelerateEntry easing
Examples
Keyboard shortcut hint
Shortcut shown in tooltip
Custom delay
Instant tooltip on hover (no delay)