Example: origin-aware animations for popover
```jsx
// index.jsx
import { Popover } from "radix-ui";
import "./styles.css";
export default () => (
<Popover.Root>
<Popover.Trigger>…</Popover.Trigger>
<Popover.Portal>
<Popover.Content className="PopoverContent">…</Popover.Content>
</Popover.Portal>
</Popover.Root>
);
```
```css
/* styles.css */
.PopoverContent {
transform-origin: var(--radix-popover-content-transform-origin);
animation: scaleIn 0.5s ease-out;
}
@keyframes scaleIn {
from {
opacity: 0;
transform: scale(0);
}
to {
opacity: 1;
transform: scale(1);
}
}
```
This example animates the popover content from its computed origin based on side, sideOffset, align, alignOffset and collisions.
Example: collision-aware animations for popover
```jsx
// index.jsx
import { Popover } from "radix-ui";
import "./styles.css";
export default () => (
<Popover.Root>
<Popover.Trigger>…</Popover.Trigger>
<Popover.Portal>
<Popover.Content className="PopoverContent">…</Popover.Content>
</Popover.Portal>
</Popover.Root>
);
```
```css
/* styles.css */
.PopoverContent {
animation-duration: 0.6s;
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.PopoverContent[data-side="top"] {
animation-name: slideUp;
}
.PopoverContent[data-side="bottom"] {
animation-name: slideDown;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
```
This example uses data-side and data-align attributes to create collision-aware animations that change at runtime to reflect actual positioning.
Example: popover with custom anchor element
```jsx
// index.jsx
import { Popover } from "radix-ui";
import "./styles.css";
export default () => (
<Popover.Root>
<Popover.Anchor asChild>
<div className="Row">
Row as anchor <Popover.Trigger>Trigger</Popover.Trigger>
</div>
</Popover.Anchor>
<Popover.Portal>
<Popover.Content>…</Popover.Content>
</Popover.Portal>
</Popover.Root>
);
```
```css
/* styles.css */
.Row {
background-color: gainsboro;
padding: 20px;
}
```
This example shows how to anchor popover content to a custom element other than the trigger using Popover.Anchor with asChild prop.
Example: abstract popover with custom API
```jsx
// your-popover.jsx
import * as React from "react";
import { Popover as PopoverPrimitive } from "radix-ui";
export const Popover = PopoverPrimitive.Root;
export const PopoverTrigger = PopoverPrimitive.Trigger;
export const PopoverContent = React.forwardRef(
({ children, ...props }, forwardedRef) => (
<PopoverPrimitive.Portal>
<PopoverPrimitive.Content sideOffset={5} {...props} ref={forwardedRef}>
{children}
<PopoverPrimitive.Arrow />
</PopoverPrimitive.Content>
</PopoverPrimitive.Portal>
),
);
```
```jsx
// Usage
import { Popover, PopoverTrigger, PopoverContent } from "./your-popover";
export default () => (
<Popover>
<PopoverTrigger>Popover trigger</PopoverTrigger>
<PopoverContent>Popover content</PopoverContent>
</Popover>
);
```
This example abstracts Popover.Arrow and sets a default sideOffset of 5 pixels, creating a simpler custom API.
Popover.Root props
Popover.Root accepts: defaultOpen (boolean, uncontrolled open state), open (boolean, controlled open state), onOpenChange ((open: boolean) => void, event handler for open state changes), and modal (boolean, default false, disables interaction with outside elements when true and hides non-popover content from screen readers).
Popover.Trigger props and data attributes
Popover.Trigger accepts asChild (boolean, default false) to merge props with a custom child element. It exposes [data-state] attribute with values 'open' or 'closed'.
Popover.Anchor props
Popover.Anchor accepts asChild (boolean, default false) to merge props with a custom child element. If not used, Popover.Content positions against Popover.Trigger by default.
Popover can be controlled or uncontrolled
Popover supports both controlled and uncontrolled APIs. Use defaultOpen for uncontrolled mode. Use open and onOpenChange together for controlled mode.
Popover.Portal props
Popover.Portal accepts forceMount (boolean, for controlling animation with libraries, inherited by Popover.Content if set) and container (HTMLElement, default document.body, specifies container element to portal content into).
Popover.Content positioning props
Popover.Content accepts: side (enum 'top' | 'right' | 'bottom' | 'left', default 'bottom', preferred side of anchor), sideOffset (number, default 0, distance in pixels from anchor), align (enum 'start' | 'center' | 'end', default 'center', preferred alignment against anchor), alignOffset (number, default 0, offset in pixels from start or end alignment), avoidCollisions (boolean, default true, overrides side and align to prevent boundary collisions), collisionBoundary (Element | null | Array<Element | null>, default [], elements used for collision detection), collisionPadding (number | Partial<Record<Side, number>>, default 0, distance from boundary edges for collision detection), arrowPadding (number, default 0, padding between arrow and content edges), sticky (enum 'partial' | 'always', default 'partial', sticky behavior on align axis), and hideWhenDetached (boolean, default false, hides content when trigger fully occluded).
Popover.Content focus and interaction props
Popover.Content accepts: onOpenAutoFocus ((event: Event) => void, called when focus enters component after opening, preventable), onCloseAutoFocus ((event: Event) => void, called when focus returns to trigger after closing, preventable), onEscapeKeyDown ((event: KeyboardEvent) => void, called on escape key, preventable), onPointerDownOutside ((event: PointerDownOutsideEvent) => void, called on pointer events outside bounds, preventable), onFocusOutside ((event: FocusOutsideEvent) => void, called on focus outside bounds, preventable), onInteractOutside ((event: PointerDownOutsideEvent | FocusOutsideEvent) => void, called on pointer or focus events outside, preventable), and forceMount (boolean, for animation control, inherits from Popover.Portal).
Popover.Content data attributes
Popover.Content exposes [data-state] with values 'open' or 'closed', [data-side] with values 'left' | 'right' | 'bottom' | 'top', and [data-align] with values 'start' | 'end' | 'center'.
Popover CSS custom properties
Popover.Content exposes CSS custom properties: --radix-popover-content-transform-origin (transform-origin computed from content and arrow positions/offsets), --radix-popover-content-available-width (remaining width between trigger and boundary edge), --radix-popover-content-available-height (remaining height between trigger and boundary edge), --radix-popover-trigger-width (width of trigger), and --radix-popover-trigger-height (height of trigger).
Popover.Arrow props
Popover.Arrow accepts asChild (boolean, default false) to merge props with a custom child element, width (number, default 10, width in pixels), and height (number, default 5, height in pixels). Must be rendered inside Popover.Content.
Popover.Close props
Popover.Close accepts asChild (boolean, default false) to merge props with a custom child element.
Popover keyboard interactions
Space: Opens/closes the popover. Enter: Opens/closes the popover. Tab: Moves focus to the next focusable element. Shift + Tab: Moves focus to the previous focusable element. Esc: Closes the popover and moves focus to Popover.Trigger.
Example: constrain popover content size using CSS custom properties
```jsx
// index.jsx
import { Popover } from "radix-ui";
import "./styles.css";
export default () => (
<Popover.Root>
<Popover.Trigger>…</Popover.Trigger>
<Popover.Portal>
<Popover.Content className="PopoverContent" sideOffset={5}>
…
</Popover.Content>
</Popover.Portal>
</Popover.Root>
);
```
```css
/* styles.css */
.PopoverContent {
width: var(--radix-popover-trigger-width);
max-height: var(--radix-popover-content-available-height);
}
```
This example shows how to constrain popover content width to match trigger width and height to not exceed viewport using exposed CSS custom properties.
Popover adheres to WAI-ARIA design pattern
The Popover component adheres to the WAI-ARIA design pattern for dialog/modal as specified at https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal
Popover positioning customization
The Popover component allows customization of side, alignment, offsets, and collision handling.
Popover focus management
Focus is fully managed within the Popover component and is customizable.
Popover dismissing and layering behavior
Dismissing and layering behavior in the Popover component is highly customizable.
Popover component structure
The Popover component consists of the following parts: Popover.Root wraps the entire component, Popover.Trigger is the button that opens the popover, Popover.Portal renders the popover content outside the DOM hierarchy, Popover.Content contains the popover text, and Popover.Arrow is an optional pointing arrow.
Popover example with styling
Example of a complete Popover implementation:
```jsx
import * as React from "react";
import { Popover } from "radix-ui";
import "./styles.css";
const PopoverDemo = () => (
<Popover.Root>
<Popover.Trigger className="PopoverTrigger">Show info</Popover.Trigger>
<Popover.Portal>
<Popover.Content className="PopoverContent">
Some content
<Popover.Arrow className="PopoverArrow" />
</Popover.Content>
</Popover.Portal>
</Popover.Root>
);
export default PopoverDemo;
```
```css
.PopoverTrigger {
background-color: white;
border-radius: 4px;
}
.PopoverContent {
border-radius: 4px;
padding: 20px;
width: 260px;
background-color: white;
}
.PopoverArrow {
fill: white;
}
```
Popover can be controlled or uncontrolled
The Popover primitive supports both controlled and uncontrolled APIs.
Popover non-modal Safari re-opening
Prevent non-modal popover from re-opening when closing using trigger in Safari.
Popover focus trapping with deleted items
Ensure focus trapping is maintained in Popover when the focused item is deleted.
Popover collisionBoundary available width calculation
Ensure --radix-popper-available-width is calculated correctly when using collisionBoundary in Popover.
Popover matching trigger size
Position Popover content correctly when matching trigger size.
Popover virtualRef prop type widened
Widened the virtualRef prop type to allow RefObject<Measurable | null> in popover components.
Popover submenu CSS custom properties
Expose new CSS custom properties to enable size constraints in Popover.
Popover.Portal added for portalling behavior
Popover now has a Portal part. To avoid regressions, this part should be used if portalling behavior is desired. Note that z-index is no longer managed, providing full control of layering.
Popover.Content Arrow offset prop removed
The offset prop was removed from Popover.Arrow.
Popover.Content new positioning props
Popover.Content has new props: collisionBoundary, arrowPadding, sticky, and hideWhenDetached.
Popover allowPinchZoom prop removed, defaults to true
The allowPinchZoom prop was removed from Popover.Root as it now defaults to true.
Popover version 0.0.16 breaking change: anchorRef replaced with Anchor part
In Popover version 0.0.16, the anchorRef prop was removed and replaced with an optional Anchor part.
Popover component parts
The Popover component consists of three parts: Root (contains all parts of a popover), Trigger (wraps the control that will open the popover), and Content (contains content to be rendered in the open popover, based on the div element). The Popover also includes a Close part that wraps the control to close the popover.
Popover Content size prop
The Popover.Content component accepts a size prop that accepts values 1, 2, 3, or 4. The size prop affects the padding and border-radius of the Content. It should be used in conjunction with width/minWidth/maxWidth and height/minHeight/maxHeight props to control the overall size of the popover.
Popover Content element type
The Popover.Content component is based on the div element.
Basic popover example with comment form
Example showing a Popover with a soft button trigger displaying a ChatBubbleIcon, a content area with an avatar, textarea for writing comments, a checkbox for 'Send to group', and a Comment button wrapped in Popover.Close.
Popover with Inset component example
Example showing how to use the Inset component to align content flush with the sides of a popover. The Inset component can be used with side="left" and pr="current" props to position image content flush to the left edge of the popover.