Popover
Non-modal anchored content with dialog semantics, title, description, close action, positioning, and dismissal.
Contract
Use controlled open or uncontrolled defaultOpen; Positioner accepts Base UI side, alignment, offset, and collision props.
Install
pnpm add @tinyrack/uiScroll inside the code area to read long lines.
Styles
@import '@tinyrack/ui/components/popover.css';Scroll inside the code area to read long lines.
Imports
import { TRPopover } from '@tinyrack/ui/components/popover';Scroll inside the code area to read long lines.
Playground
Usage
Examples
Positioning sides permalink
Each trigger opens an actual anchored popup on the requested side, with collision handling.
Inline alignments permalink
Choose start, center, or end independently from side.
Controlled lifecycle, collision, and offsets permalink
The live state mirrors controlled open changes while side and alignment offsets remain collision-aware near the inline edge.
Detached trigger handle permalink
A typed handle connects a trigger outside Root and carries its payload into the popup content.
API
Base UI owns anchored positioning, collision avoidance, focus behavior, portal, dialog relationships, and outside/Escape dismissal. Keep the surface non-modal for supplemental actions; use TRDialog when the task must block the page behind it.
TRPopover.Root
Controls open or defaultOpen, reports onOpenChange, supports modal, imperative actionsRef, trigger IDs, and a typed handle. Root renders no DOM element.
TRPopover.Trigger
Renders the opening button and accepts handle, payload, openOnHover, delay, closeDelay, render, native button props, and ref.
TRPopover.Portal
Moves the layer to document.body by default. Use container to select another host and keepMounted to retain hidden content.
TRPopover.Positioner
Accepts side, align, sideOffset, alignOffset, collisionAvoidance, collisionBoundary, collisionPadding, anchor, sticky, disableAnchorTracking, and arrowPadding.
TRPopover.Popup
Renders the non-modal dialog, receives title and description relationships, and exposes open, closed, side, alignment, and transition data attributes.
TRPopover.Arrow
Renders the positioned arrow. Customize its geometry with --tr-layer-arrow-size.
TRPopover.Backdrop
Renders an optional backdrop, primarily for modal or trap-focus presentations. It is portaled separately from the positioner.
TRPopover.Title
Labels Popup through aria-labelledby.
TRPopover.Description
Describes Popup through aria-describedby.
TRPopover.Close
Closes the active popover and restores focus according to Base UI's dismissal behavior.
TRPopover.Viewport
Hosts animated content transitions when one handle-backed popover switches between multiple triggers.
TRPopover.createHandle
Creates TRPopoverHandle<Payload> for detached triggers. Pass the same handle to Root and Trigger; Trigger's payload is available to Root's render function.