Skip to content
MIZU.

Tooltip

A small, linked explanation that works with focus and can be dismissed.

Live — this one is real

Keep your changes

Usage

import { Tooltip, Button } from "mizu-ui";

export function Example() {
  return (
    <Tooltip label="Keep your changes">
      <Button size="sm" variant="ghost">
        Save draft
      </Button>
    </Tooltip>
  );
}

Source & setup

Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.

Inspect ui/Tooltip.tsx

Source is included in the npm package under src/ui/Tooltip.tsx.

Open full source ↗

Props

PropTypeDefaultDescription
labelstring—Description linked to the control.
childrenReactElement—One element accepting aria-describedby.
side"top" | "bottom""top"Position.

Accessibility

Shown on hover/focus and dismissed with Escape. Use a focusable control as the child. Avoid long or essential content.

Motion

Short CSS transition; reduced motion removes travel.

Works alongside

ButtonPrimitivesMarkSectionTag