Skip to main content
BETA
View Zag.js on Github
Join the Discord server

Popover

A popover is a non-modal dialog that floats around a trigger. It is used to display contextual information to the user, and should be paired with a clickable trigger element.

Properties

Features

  • Focus is managed and can be customized.
  • Supports modal and non-modal modes.
  • Ensures correct DOM order after tabbing out of the popover, whether it's portalled or not.

Installation

To use the popover machine in your project, run the following command in your command line:

npm install @zag-js/popover @zag-js/react # or yarn add @zag-js/popover @zag-js/react

This command will install the framework agnostic popover logic and the reactive utilities for your framework of choice.

Anatomy

To set up the popover correctly, you'll need to understand its anatomy and how we name its parts.

Each part includes a data-part attribute to help identify them in the DOM.

On a high level, the popover consists of:

  • Trigger: The trigger for the popover.
  • Positioner: The element that positions the popover.
  • Content: The container for the popover's content.
  • Title: The accessible title for the popover.
  • Description: The accessible description for the popover.
  • Close Button: The trigger to close the popover.

When positioning the popover, you might use these parts:

  • Arrow: The arrow element that points to the trigger.
  • Anchor: The optional reference element that the popover is anchored or positioned. By default, we use the trigger as the anchor element.

Usage

First, import the popover package into your project

import * as popover from "@zag-js/popover"

The popover package exports two key functions:

  • machine — The state machine logic for the popover widget.
  • connect — The function that translates the machine's state to JSX attributes and event handlers.

You'll need to provide a unique id to the useSetup hook. This is used to ensure that every part has a unique identifier.

Next, import the required hooks and functions for your framework and use the popover machine in your project 🔥

import * as popover from "@zag-js/popover" import { useMachine, normalizeProps } from "@zag-js/react" import { Portal } from "@reach/portal" export function Popover() { const [state, send] = useMachine(popover.machine({ id: "1" })) const api = popover.connect(state, send, normalizeProps) return ( <div> <button {...api.triggerProps}>Click me</button> <div {...api.positionerProps}> <div {...api.contentProps}> <div {...api.titleProps}>Presenters</div> <div {...api.descriptionProps}>Description</div> <button>Action Button</button> <button {...api.closeButtonProps}>X</button> </div> </div> </div> ) }

Rendering the popover in a portal

By default, the popover is rendered in the same DOM hierarchy as the trigger. To render the popover within a portal, pass portalled: true property to the machine's context.

Note: This requires that you render the component within a Portal based on the framework you use.

import { Portal } from "@reach/portal" import * as popover from "@zag-js/popover" import { useMachine, normalizeProps } from "@zag-js/react" import * as React from "react" export function Popover() { const [state, send] = useMachine(popover.machine({ id: "1", portalled: true })) const api = popover.connect(state, send, normalizeProps) return ( <div> <button {...api.triggerProps}>Click me</button> <Portal> <div {...api.positionerProps}> <div {...api.contentProps}> <div {...api.titleProps}>Presenters</div> <div {...api.descriptionProps}>Description</div> <button>Action Button</button> <button {...api.closeButtonProps}>X</button> </div> </div> </Portal> </div> ) }

Managing focus within popover

When the popover open, focus is automatically set to the first focusable element within the popover. To customize the element that should get focus, set the initialFocusEl property in the machine's context.

export function Popover() { // initial focused element ref const inputRef = useRef(null) const [state, send] = useMachine( popover.machine({ id: "1", initialFocusEl: () => inputRef.current, }), ) // ... return ( //... <input ref={inputRef} /> // ... ) }

Changing the modality

In some cases, you might want the popover to be modal. This means that it'll:

  • trap focus within its content
  • block scrolling on the body
  • disable pointer interactions outside the popover
  • hide content behind the popover from screen readers

To make the popover modal, set the modal: true property in the machine's context. When modal: true, we set the portalled attribute to true as well.

Note: This requires that you render the component within a Portal.

const [state, send] = useMachine( accordion.machine({ modal: true, }), )

Close behavior

The popover is designed to close on blur and when the esc key is pressed.

To prevent it from closing on blur (clicking or focusing outside), pass the closeOnBlur property and set it to false.

const [state, send] = useMachine( accordion.machine({ closeOnBlur: true, }), )

To prevent it from closing when the esc key is pressed, pass the closeOnEsc property and set it to false.

const [state, send] = useMachine( accordion.machine({ closeOnEsc: true, }), )

Adding an arrow

To render an arrow within the popover, use the api.arrowProps and api.innerArrowProps.

//... const api = popover.connect(state, send) //... return ( <div {...api.positionerProps}> <div {...api.arrowProps}> <div {...api.innerArrowProps} /> </div> <div {...api.contentProps}>{/* ... */}</div> </div> ) //...

Changing the placement

To change the placment of the popover, set the positioning.placement property in the machine's context.

const [state, send] = useMachine( accordion.machine({ positioning: { placement: "top-start", }, }), )

Callbacks

When the popover is opened or closed, we invoke the onOpen and onClose callbacks.

const [state, send] = useMachine( accordion.machine({ onOpen() { console.log("Popover opened") }, onClose() { console.log("Popover closed") }, }), )

Methods and Properties

The popover's api exposes the following methods:

  • isOpen — Whether the popover is open.
  • portalled — Whether the popover is portalled. Useful for conditionally rendering a portal element.
  • open() — Function to open the popover.
  • close() — Function to close the popover.

Styling guide

Earlier, we mentioned that each popover part has a data-part attribute added to them to select and style them in the DOM.

Expanded state

When the popover is expanded, we add a data-expanded and data-placement attribute to the trigger.

[data-part="trigger"][data-expanded] { /* styles for the expanded state */ } [data-part="trigger"][data-placement="(top|bottom)-(start|end)"] { /* styles for computed placement */ }

Arrow

The arrow element requires specific css variables to be set for it to show correctly.

[data-part="arrow"] { --arrow-background: white; --arrow-size: 16px; }

A common technique for adding a shadow to the arrow is to use set filter: drop-down(...) css property on the content element. Alternatively, you can use the --arrow-shadow-color variable.

[data-part="arrow"] { --arrow-shadow-color: gray; }

Edit this page on GitHub

On this page