Tooltip

Use Tooltip

Tooltip is a named export of @flood-md/react. Connect the package once, then import what you use.

"use client";

import { FloodRoot, Tooltip, Button } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <Tooltip content="Additional context" trigger={trigger => <Button {...trigger}>Hover or focus</Button>} />
    </FloodRoot>
  );
}

Design notes

• Requires native Popover API.
• Forward trigger props and ref to one actual button. Tooltip is text-only; interactive content belongs in Popover.
• Escape dismisses. Hover can move onto the tooltip; focus stays on the trigger. Do not use it as the only accessible name or essential instruction.

API reference