Popover

Displays rich content in a portal, triggered by a button.

Features

  • Can be controlled or uncontrolled.
  • Customize side, alignment, offsets, collision handling.
  • Optionally render a pointing arrow.
  • Focus is fully managed and customizable.
  • Dismissing and layering behavior is highly customizable.

Install the component from your command line.

npm install @radix-ui/react-popover

Import the components and piece the parts together.

import * as Popover from '@radix-ui/react-popover';
export default () => (
<Popover.Root>
<Popover.Trigger />
<Popover.Anchor />
<Popover.Content>
<Popover.Close />
<Popover.Arrow />
</Popover.Content>
</Popover.Root>
);

Create your styled popover component from the primitive parts.

import { styled } from 'path-to/stitches.config';
import * as Popover from '@radix-ui/react-popover';
const StyledContent = styled(Popover.Content, {
borderRadius: 3,
padding: '20px',
fontSize: 14,
backgroundColor: 'gainsboro',
color: 'black',
});
const StyledArrow = styled(Popover.Arrow, {
fill: 'gainsboro',
});
export default () => (
<Popover.Root>
<Popover.Trigger>Trigger</Popover.Trigger>
<StyledContent>
<h3>Popover content</h3>
<p>Are you sure you wanna do this?</p>
<Popover.Close>Yes</Popover.Close>
<StyledArrow />
</StyledContent>
</Popover.Root>
);

Contains all the parts of a popover.

PropTypeDefault
defaultOpenbooleanNo default value
openbooleanNo default value
onOpenChangefunctionNo default value

The button that toggles the popover. By default, the Popover.Content will position itself against the trigger.

PropTypeDefault
asenumbutton

An optional element to position the Popover.Content against. If this part is not used, the content will position alongside the Popover.Trigger.

PropTypeDefault
asenumdiv

The component that pops out when the popover is open.

PropTypeDefault
asenumdiv
trapFocusbooleantrue
onOpenAutoFocusfunctionNo default value
onCloseAutoFocusfunctionNo default value
disableOutsidePointerEventsbooleanfalse
onEscapeKeyDownfunctionNo default value
onPointerDownOutsidefunctionNo default value
onFocusOutsidefunctionNo default value
onInteractOutsidefunctionNo default value
disableOutsideScrollbooleanfalse
portalledbooleantrue
forceMountbooleanNo default value
sideenum"bottom"
sideOffsetnumber0
alignenum"center"
alignOffsetnumber0
avoidCollisionsbooleantrue
collisionToleranceboolean0

An optional arrow element to render alongside the popover. This can be used to help visually link the anchor with the Popover.Content. Must be rendered inside Popover.Content.

PropTypeDefault
asenumsvg
widthnumber10
heightnumber5
offsetnumberNo default value

The button that closes an open popover.

PropTypeDefault
asenumbutton

We expose a CSS custom property --radix-popover-content-transform-origin. Use it to animate the content from its computed origin based on side, sideOffset, align, alignOffset and any collisions.

const scaleIn = keyframes({
'0%': { opacity: 0, transform: 'scale(0)' },
'100%': { opacity: 1, transform: 'scale(1)' },
});
const StyledContent = styled(Popover.Content, {
transformOrigin: 'var(--radix-popover-content-transform-origin)',
animation: `${scaleIn} 0.5s ease-out`,
});

We expose data-side and data-align attributes. Their values will change at runtime to reflect collisions. Use them to create collision and direction-aware animations.

const slideDown = keyframes({
'0%': { opacity: 0, transform: 'translateY(-10px)' },
'100%': { opacity: 1, transform: 'translateY(0)' },
});
const slideUp = keyframes({
'0%': { opacity: 0, transform: 'translateY(10px)' },
'100%': { opacity: 1, transform: 'translateY(0)' },
});
const StyledContent = styled(Popover.Content, {
'&[data-side="top"]': { animationName: slideUp },
'&[data-side="bottom"]': { animationName: slideDown },
animationDuration: '0.6s',
animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
});

You can anchor the content to another element if you do not want to use the trigger as the anchor.

Row as anchor
import { styled } from 'path-to/stitches.config';
import * as Popover from '@radix-ui/react-popover';
const StyledContent = styled(Popover.Content, {
borderRadius: 3,
padding: '20px',
fontSize: 14,
backgroundColor: 'gainsboro',
color: 'black',
});
const StyledArrow = styled(Popover.Arrow, {
fill: 'gainsboro',
});
const StyledAnchor = styled(Popover.Anchor, {
background: 'gainsboro',
padding: 20,
});
export default () => (
<Popover.Root>
<StyledAnchor>
Row as anchor <Popover.Trigger>Trigger</Popover.Trigger>
</StyledAnchor>
<StyledContent>
<h3>Popover content</h3>
<p>Are you sure you wanna do this?</p>
<Popover.Close>Yes</Popover.Close>
<StyledArrow />
</StyledContent>
</Popover.Root>
);

Adheres to the Dialog WAI-ARIA design pattern.

KeyDescription
SpaceOpens/closes the popover.
EnterOpens/closes the popover.
TabMoves focus to the next focusable element
Shift + TabMoves focus to the previous focusable element
EscCloses the popover and moves focus to Popover.Trigger.

Create your own API by abstracting the primitive parts into your own component.

Abstract the arrow and set default configuration

This example abstracts the Popover.Arrow part and sets a default sideOffset configuration.

Usage

import { Popover, PopoverTrigger, PopoverContent, } from './your-popover';
export default () => (
<Popover>
<PopoverTrigger>Popover trigger</PopoverTrigger>
<PopoverContent>Popover content</PopoverContent>
</Popover>
);

Implementation

// your-popover.js
import React from 'react';
import * as PopoverPrimitive from '@radix-ui/react-popover';
export const Popover = PopoverPrimitive.Root;
export const PopoverTrigger = PopoverPrimitive.Trigger;
export const PopoverContent = React.forwardRef(
({ children, ...props }, forwardedRef) => (
<PopoverPrimitive.Content sideOffset={5} {...props} ref={forwardedRef} >
{children}
<PopoverPrimitive.Arrow />
</PopoverPrimitive.Content>
)
);