Overlays & Feedback·Available inReact Vue Angular·View as Markdown

Preview

example.tsxtsx

instant (openDelay 0)

wraps disabled buttons

multi-line body

Switch the framework picker (top-right of the panel) to render the same demo live in React, Vue, or Angular — same class names, ARIA, and visual output across all three.

Playground

Flip props to see how the component responds. The snippet below updates as you change options.

Installation

Sisyphos UI ships unified packages for React, Vue, and Angular. Pick the one that matches your stack — every framework exports the same component classes, ARIA semantics, and CSS tokens.

$ pnpm add @sisyphos-ui/react

Then import the bundled stylesheet once at app entry: import "@sisyphos-ui/react/styles.css";

Usage

Idiomatic usage in each supported framework

example.tsx

import { Tooltip, Button } from "@sisyphos-ui/react";

export const Hint = () => (
  <Tooltip content="⌘K to search">
    <Button variant="outlined">Hover me</Button>
  </Tooltip>
);

API

Prop	Type	Default	Description
content*	ReactNode	—	Tooltip content. When falsy, the tooltip is disabled entirely.
children*	ReactElement	—	Exactly one focusable element used as the anchor.
placement	"top" \| "bottom" \| "left" \| "right" \| "top-start" \| "top-end" \| "bottom-start" \| "bottom-end"	"top"	Preferred placement; auto-flips to the opposite side if it doesn't fit the viewport.
offset	number	8	Pixel gap between the anchor and the tooltip.
openDelay	number	200	Milliseconds before showing on hover or focus.
closeDelay	number	100	Milliseconds before hiding on leave or blur.
arrow	boolean	true	Render an arrow pointing at the anchor.
open	boolean	—	Controlled open state; omit to stay uncontrolled.
onOpenChange	(open: boolean) => void	—	Fired whenever the open state changes.
disabled	boolean	false	Disable the tooltip entirely (e.g. on touch devices).

The full API including refs, ARIA attributes, and HTML passthroughs lives in the package README on npm.

Accessibility

Adheres to the Tooltip WAI-ARIA design pattern.

The floating element renders with role="tooltip" and is linked to the trigger through aria-describedby while visible (merged with any existing aria-describedby).
Shows on keyboard focus as well as hover, and hides on blur — full parity between pointer and keyboard users.
Escape dismisses the tooltip without moving focus off the trigger.
The arrow is aria-hidden; when content is falsy or disabled is set, no tooltip or ARIA wiring is rendered at all.

Keyboard interactions

Key	Action
`Tab`	Focusing the trigger shows the tooltip after `openDelay`; blurring hides it after `closeDelay`.
`Esc`	Dismisses the tooltip while it is visible.

Need more?View on npm →