Popover

A popover is an overlay element positioned relative to a trigger.

placement

size

offset

crossOffset

shouldFlip

hideArrow

import {Popover, DialogTrigger} from '@react-spectrum/s2/Popover';
import {ActionButton} from '@react-spectrum/s2/ActionButton';
import {Form} from '@react-spectrum/s2/Form';
import {TextField} from '@react-spectrum/s2/TextField';
import {Switch} from '@react-spectrum/s2/Switch';
import {Button} from '@react-spectrum/s2/Button';
import Feedback from '@react-spectrum/s2/icons/Feedback';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

function Example(props) {
  return (
    <DialogTrigger>
      <ActionButton aria-label="Feedback">
        <Feedback />
      </ActionButton>
      <Popover {...props} size="S">
        <div className={style({padding: 12})}>
          <p className={style({font: 'body', marginTop: 0})}>How are we doing? Share your feedback here.</p>
          <Form>
            <TextField label="Subject" placeholder="Enter a summary" />
            <TextField label="Description" isRequired placeholder="Enter your feedback" />
            <Switch>Adobe can contact me for further questions concerning this feedback</Switch>
            <Button styles={style({marginStart: 'auto'})}>Submit</Button>
          </Form>
        </div>
      </Popover>
    </DialogTrigger>
  );
}

Custom anchor

To position a popover relative to a different element than its trigger, use the triggerRef and isOpen props instead of <DialogTrigger>. onOpenChange will be called when the user closes the popover.

Popover appears here

import {Popover} from '@react-spectrum/s2/Popover';
import {Button} from '@react-spectrum/s2/Button';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState, useRef} from 'react';

function Example() {
  let [isOpen, setOpen] = useState(false);
  let triggerRef = useRef(null);

  return (
    <div className={style({display: 'flex', flexDirection: 'column', gap: 64, alignItems: 'center'})}>
      <Button onPress={() => setOpen(!isOpen)}>
        Open popover
      </Button>
      <div
        ref={triggerRef}
        className={style({
          padding: 8,
          backgroundColor: 'gray-100',
          borderRadius: 'default',
          font: 'ui'
        })}>
        Popover appears here
      </div>
      <Popover
        triggerRef={triggerRef}
        isOpen={isOpen}
        onOpenChange={setOpen}>
        <div className={style({font: 'ui'})}>
          Popover with custom trigger reference
        </div>
      </Popover>
    </div>
  );
}

<Example />

API

<DialogTrigger>
  <Button />
  <Popover>
    {/* ... */}
  </Popover>
</DialogTrigger>

DialogTrigger

Name	Type
`children`	`ReactNode`

Name	Type	Default
`children`	`ReactNode`	Default: —
The children of the popover.
`padding`	`'default' \| 'none'`	Default: `'default'`
The amount of padding around the contents of the dialog.
`styles`	`PopoverStylesProp`	Default: —
Spectrum-defined styles, returned by the `style()` macro.
`hideArrow`	`boolean`	Default: `false`
Whether a popover's arrow should be hidden.
`size`	`'S' \| 'M' \| 'L'`	Default: —
The size of the Popover. If not specified, the popover fits its contents.
`triggerRef`	`RefObject<Element \| null>`	Default: —
The ref for the element which the popover positions itself with respect to. When used within a trigger component such as DialogTrigger, MenuTrigger, Select, etc., this is set automatically. It is only required when used standalone.
`placement`	`Placement`	Default: `'bottom'`
The placement of the element with respect to its anchor element.
`isNonModal`	`boolean`	Default: —
Whether the popover is non-modal, i.e. elements outside the popover may be interacted with by assistive technologies. Most popovers should not use this option as it may negatively impact the screen reader experience. Only use with components such as combobox, which are designed to handle this situation carefully.
`getTargetRect`	`(target: Element) => DOMRect \| null \| undefined`	Default: `target.getBoundingClientRect()`
Overrides the target element's bounding rectangle. Useful for positioning relative to a specific point such as the mouse cursor (e.g. context menus) or text selection.