Popover

A click- or hover-triggered floating panel, positioned with @floating-ui/react and rendered in a portal with focus management. Composed from Popover, Popover.Trigger, and Popover.Content.

When to use

Use Popover when the overlay holds interactive or richer content and should open on click (or hover). For a short, non-interactive hint that opens on hover/focus, use Tooltip instead.

Unlike most @uxf/ui components, this directory has no index.ts — import from the file directly:

import { Popover } from "@uxf/ui/popover/popover";

The content is unstyled (no stylesheet ships with this component); style Popover.Content yourself.

There is no @uxf/form twin.

Usage

import { Popover } from "@uxf/ui/popover/popover";

<Popover placement="right-start" trigger="click">
    <Popover.Trigger>Trigger</Popover.Trigger>
    <Popover.Content>Popover content</Popover.Content>
</Popover>;

Set trigger — without it, the popover has no built-in open interaction. Popover.Content renders null while closed.

Props

Popover (root)

Popover.Trigger

Extends HTMLAttributes<HTMLElement>.

Popover.Content

Extends HTMLAttributes<HTMLDivElement> — standard <div> attributes (children, className, style, …). It is portaled and wrapped in a non-modal FloatingFocusManager, and carries aria-labelledby / aria-describedby wiring from context.

Variants & states

• Open triggers: trigger="click" toggles on click; trigger="hover" opens on hover with a safePolygon bridge into the content.
• Dismiss: closes on Escape and outside interaction.
• Focus: focus is managed within the content while open (non-modal).

Advanced: usePopoverContext

usePopoverContext is exported for reading the popover state from a descendant of Popover. It throws if called outside a <Popover>.

Requirements

No stylesheet — the panel ships unstyled. It relies only on being rendered inside a React tree (uses a portal to document.body).