Popover

Use Popover

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

"use client";

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

export function Example() {
  return (
    <FloodRoot>
      <Popover title="Project settings" trigger={trigger => <Button {...trigger}>Settings</Button>}>Project details.</Popover>
    </FloodRoot>
  );
}

Design notes

• Forward all trigger props and ref.
• Escape, outside pointer and focus leaving dismiss. Focus enters content and returns when appropriate; Tab is not trapped.
• Closed content unmounts; keep persistent data in the host. Uses native Popover API within the existing DOM/theme scope.

API reference