Trivela UI

Tooltip

A hint shown on hover and on keyboard focus, with color token support.

Wrap the element the hint describes; Tooltip links the two with aria-describedby automatically, so a screen reader announces the hint with the trigger. Showing and hiding is pure CSS — nothing runs on hover. It is a client component only because it needs useId to mint that link.

It does not flip near a screen edge. There is no collision detection — pick the side that fits, or reach for a positioning library if you need automatic placement.

Usage

tooltip-demo.tsx
import { Tooltip } from 'trivela-ui';

export function Example() {
  return (
    <Tooltip content="Deploy to production">
      <Button>Deploy</Button>
    </Tooltip>
  );
}

Examples

Basic

Hover the button — then press Tab to it. The hint appears both ways, because a keyboard user has no pointer to hover with.

Sides

Four placements. There is no collision detection, so choose the one with room.

Colors

The color token sets the hint's fill at the 900 step, so the text stays legible on every one.

Any trigger

The child can be anything focusable. Plain text works too, but only a focusable element can carry the description — so prefer a button or a link.

License

Longer hints

The hint sizes to its text up to max-w-xs, then wraps. Override with className.

API Reference

PropTypeDefaultDescription
contentReactNode—Required. The hint shown on hover or focus.
childrenReactNode—Required. The trigger. A single element receives aria-describedby automatically.
side'top' | 'bottom' | 'left' | 'right''top'Placement. No collision detection — pick one that fits.
color'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral''neutral'Color scale for the hint's fill.
classNamestring—Merged onto the hint, not the wrapper.
...propsHTMLAttributes<HTMLSpanElement>—Forwarded to the hint. role and id are set by the component.