Popover

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

placement

size

offset

crossOffset

shouldFlip

hideArrow

import {Popover, DialogTrigger, ActionButton, Form, TextField, Switch, Button} from '@react-spectrum/s2';
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, Button} from '@react-spectrum/s2';
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 style={{display: 'flex', gap: '12px', 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
`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.
`children`	`ChildrenOrFunction<PopoverRenderProps>`	Default: —
The children of the component. A function may be provided to alter the children based on component state.

Render Prop	CSS Selector
`trigger`	CSS Selector: `[data-trigger="..."]`
The name of the component that triggered the popover, e.g. "DialogTrigger" or "ComboBox".
`placement`	CSS Selector: `[data-placement="left \| right \| top \| bottom"]`
The placement of the popover relative to the trigger.
`isEntering`	CSS Selector: `[data-entering]`
Whether the popover is currently entering. Use this to apply animations.
`isExiting`	CSS Selector: `[data-exiting]`
Whether the popover is currently exiting. Use this to apply animations.