Popover

Popover is a non-modal dialog that floats around a trigger. Popover is used to display contextual information to users, and should be paired with a clickable trigger element.

Popover is built on top of the Popper.js library, and is composed of the Popper component.

Import

Popover: The wrapper that provides props, state, and context to its children
PopoverTrigger: Used to wrap the reference (or trigger) element
PopoverContent: The popover itself
PopoverHeader: The header of the popover
PopoverBody: The body of the popover
PopoverFooter: The footer of the popover

import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverHeader,
  PopoverBody,
  PopoverFooter,
} from '@trendmicro/react-styled-ui';import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverHeader,
  PopoverBody,
  PopoverFooter,
} from '@trendmicro/react-styled-ui';

Basic Usage

When using this component, ensure the children passed to PopoverTrigger is focusable. Popover should be accessible and should allow users to access it using the tab key on a keyboard.

A11y: When Popover opens, the focus status is sent to PopoverContent. When Popover is closed, the focus status is returned to the trigger.


EDITABLE EXAMPLE
<Popover>
  <PopoverTrigger>
    <Button>Trigger</Button>
  </PopoverTrigger>
  <PopoverContent>
    <PopoverHeader>Confirmation!</PopoverHeader>
    <PopoverBody>Lorem ipsum dolor sit amet, consectetur adicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</PopoverBody>
  </PopoverContent>
</Popover><Popover>
  <PopoverTrigger>
    <Button>Trigger</Button>
  </PopoverTrigger>
  <PopoverContent>
    <PopoverHeader>Confirmation!</PopoverHeader>
    <PopoverBody>Lorem ipsum dolor sit amet, consectetur adicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</PopoverBody>
  </PopoverContent>
</Popover>

Focus an element when `Popover` opens

By default, the focus status is to sent to PopoverContent when Popover opens. You can send the focus status to a specific element when it opens by passing the initialFocusRef prop.


EDITABLE EXAMPLE
function WalkthroughPopover() {
  const initialFocusRef = React.useRef();
  return (
    <Popover
      initialFocusRef={initialFocusRef}
      placement="bottom"
    >
      <PopoverTrigger>
        <Link>Trigger</Link>
      </PopoverTrigger>
      <PopoverContent>
        <PopoverHeader>
          Manage Your Channels
        </PopoverHeader>
        <PopoverBody>
          Lorem ipsum dolor sit amet, consectetur adicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          <Input mt="3x" ref={initialFocusRef} placeholder="Placeholder text" />
        </PopoverBody>
        <PopoverFooter
          border="0"
          display="flex"
          alignItems="center"
          justifyContent="space-between"
        >
          <Link fontSize="sm">Learn more</Link>
          <Stack direction="row" spacing="2x">
            <Button variant="primary">Setup Email</Button>
            <Button variant="default">
              Next
            </Button>
          </Stack>
        </PopoverFooter>
      </PopoverContent>
    </Popover>
  );
}function WalkthroughPopover() {
  const initialFocusRef = React.useRef();
  return (
    <Popover
      initialFocusRef={initialFocusRef}
      placement="bottom"
    >
      <PopoverTrigger>
        <Link>Trigger</Link>
      </PopoverTrigger>
      <PopoverContent>
        <PopoverHeader>
          Manage Your Channels
        </PopoverHeader>
        <PopoverBody>
          Lorem ipsum dolor sit amet, consectetur adicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          <Input mt="3x" ref={initialFocusRef} placeholder="Placeholder text" />
        </PopoverBody>
        <PopoverFooter
          border="0"
          display="flex"
          alignItems="center"
          justifyContent="space-between"
        >
          <Link fontSize="sm">Learn more</Link>
          <Stack direction="row" spacing="2x">
            <Button variant="primary">Setup Email</Button>
            <Button variant="default">
              Next
            </Button>
          </Stack>
        </PopoverFooter>
      </PopoverContent>
    </Popover>
  );
}

Accessing Internal state

Tonic UI provides access to two internal states: isOpen and onClose. Use the render prop pattern to access the internal states.


EDITABLE EXAMPLE
function InternalStateEx() {
  const initRef = React.useRef();
  return (
    <Popover
      initialFocusRef={initRef}
      placement="right"
    >
    {({ isOpen, onClose }) => (
      <>
        <PopoverTrigger>
          <Button>Click to {isOpen ? "close" : "open"}</Button>
        </PopoverTrigger>
        <PopoverContent>
          <PopoverHeader>
            Manage Your Channels
          </PopoverHeader>
          <PopoverBody>
            Lorem ipsum dolor sit amet, consectetur adicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            <Input mt="3x" placeholder="Placeholder text" />
          </PopoverBody>
          <PopoverFooter
            border="0"
            display="flex"
            alignItems="center"
            justifyContent="space-between"
          >
            <Link fontSize="sm">Learn more</Link>
            <Stack direction="row" spacing="2x">
              <Button variant="primary">Submit</Button>
              <Button variant="default" onClick={onClose} ref={initRef}>
                Cancel
              </Button>
            </Stack>
          </PopoverFooter>
        </PopoverContent>
      </>
    )}
    </Popover>
  );
}function InternalStateEx() {
  const initRef = React.useRef();
  return (
    <Popover
      initialFocusRef={initRef}
      placement="right"
    >
    {({ isOpen, onClose }) => (
      <>
        <PopoverTrigger>
          <Button>Click to {isOpen ? "close" : "open"}</Button>
        </PopoverTrigger>
        <PopoverContent>
          <PopoverHeader>
            Manage Your Channels
          </PopoverHeader>
          <PopoverBody>
            Lorem ipsum dolor sit amet, consectetur adicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            <Input mt="3x" placeholder="Placeholder text" />
          </PopoverBody>
          <PopoverFooter
            border="0"
            display="flex"
            alignItems="center"
            justifyContent="space-between"
          >
            <Link fontSize="sm">Learn more</Link>
            <Stack direction="row" spacing="2x">
              <Button variant="primary">Submit</Button>
              <Button variant="default" onClick={onClose} ref={initRef}>
                Cancel
              </Button>
            </Stack>
          </PopoverFooter>
        </PopoverContent>
      </>
    )}
    </Popover>
  );
}

Controlled Usage

You can control the opening and closing of Popover by passing the isOpen or onClose state.

If required, you can set returnFocusOnClose to false to prevent Popver from returning the focus status to the children of PopoverTrigger.


EDITABLE EXAMPLE
function ControlledUsage() {
  const [isOpen, setIsOpen] = React.useState(false);
  const open = () => setIsOpen(!isOpen);
  const close = () => setIsOpen(false);
  return (
    <>
      <Button mr={5} onClick={open}>
        Trigger
      </Button>
      <Popover
        returnFocusOnClose={false}
        isOpen={isOpen}
        onClose={close}
        placement="right"
        closeOnBlur={false}
      >
        <PopoverTrigger>
          <Button variant="primary">Popover Target</Button>
        </PopoverTrigger>
        <PopoverContent>
          <PopoverHeader>
            At least 8 characters consisting of:
          </PopoverHeader>
          <PopoverBody>
            <ul>
              <li>Alphanumeric characters (A-Z, a-z, 0-9) with both upper and lower case letters and number characters.</li>
              <li>At least one special character</li>
            </ul>
          </PopoverBody>
        </PopoverContent>
      </Popover>
    </>
  );
}function ControlledUsage() {
  const [isOpen, setIsOpen] = React.useState(false);
  const open = () => setIsOpen(!isOpen);
  const close = () => setIsOpen(false);
  return (
    <>
      <Button mr={5} onClick={open}>
        Trigger
      </Button>
      <Popover
        returnFocusOnClose={false}
        isOpen={isOpen}
        onClose={close}
        placement="right"
        closeOnBlur={false}
      >
        <PopoverTrigger>
          <Button variant="primary">Popover Target</Button>
        </PopoverTrigger>
        <PopoverContent>
          <PopoverHeader>
            At least 8 characters consisting of:
          </PopoverHeader>
          <PopoverBody>
            <ul>
              <li>Alphanumeric characters (A-Z, a-z, 0-9) with both upper and lower case letters and number characters.</li>
              <li>At least one special character</li>
            </ul>
          </PopoverBody>
        </PopoverContent>
      </Popover>
    </>
  );
}

Customizing Popover

Hide arrow


EDITABLE EXAMPLE
<Popover hideArrow>
  <PopoverTrigger>
    <Button>Trigger</Button>
  </PopoverTrigger>
  <PopoverContent>
    <PopoverHeader>Confirmation!</PopoverHeader>
    <PopoverBody>Lorem ipsum dolor sit amet, consectetur adicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</PopoverBody>
  </PopoverContent>
</Popover><Popover hideArrow>
  <PopoverTrigger>
    <Button>Trigger</Button>
  </PopoverTrigger>
  <PopoverContent>
    <PopoverHeader>Confirmation!</PopoverHeader>
    <PopoverBody>Lorem ipsum dolor sit amet, consectetur adicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</PopoverBody>
  </PopoverContent>
</Popover>

Offset position


EDITABLE EXAMPLE
<Popover skidding={50} distance={0}>
  <PopoverTrigger>
    <Button>Trigger</Button>
  </PopoverTrigger>
  <PopoverContent>
    <PopoverHeader>Confirmation!</PopoverHeader>
    <PopoverBody>Lorem ipsum dolor sit amet, consectetur adicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</PopoverBody>
  </PopoverContent>
</Popover><Popover skidding={50} distance={0}>
  <PopoverTrigger>
    <Button>Trigger</Button>
  </PopoverTrigger>
  <PopoverContent>
    <PopoverHeader>Confirmation!</PopoverHeader>
    <PopoverBody>Lorem ipsum dolor sit amet, consectetur adicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</PopoverBody>
  </PopoverContent>
</Popover>

Hover Trigger

To show Popover when you mouse over or focus on the trigger, pass the prop trigger and set it to hover. When you focus on or mouse over the popover trigger, Popover will open.

If you quickly move your cursor to the popover content when it is open, Popover will remain open until you move away the cursor.


EDITABLE EXAMPLE
<Popover hideArrow trigger="hover">
  <PopoverTrigger>
    <Icon icon="info" color="white:secondary" _hover={{ color: 'white:emphasis' }}/>
  </PopoverTrigger>
  <PopoverContent>
    <PopoverHeader>Confirmation!</PopoverHeader>
    <PopoverBody>Lorem ipsum dolor sit amet, consectetur adicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</PopoverBody>
  </PopoverContent>
</Popover><Popover hideArrow trigger="hover">
  <PopoverTrigger>
    <Icon icon="info" color="white:secondary" _hover={{ color: 'white:emphasis' }}/>
  </PopoverTrigger>
  <PopoverContent>
    <PopoverHeader>Confirmation!</PopoverHeader>
    <PopoverBody>Lorem ipsum dolor sit amet, consectetur adicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</PopoverBody>
  </PopoverContent>
</Popover>

Mouse tracking


EDITABLE EXAMPLE
<Stack shouldWrapChildren direction="row" spacing="2x">
  <Popover trigger="hover" nextToCursor>
    <PopoverTrigger>
      <Button>Next to cursor</Button>
    </PopoverTrigger>
    <PopoverContent>
      <PopoverBody>Lorem ipsum dolor sit amet</PopoverBody>
    </PopoverContent>
  </Popover>
  <Popover trigger="hover" followCursor>
    <PopoverTrigger>
      <Button>Follow cursor</Button>
    </PopoverTrigger>
    <PopoverContent>
      <PopoverBody>Lorem ipsum dolor sit amet</PopoverBody>
    </PopoverContent>
  </Popover>
</Stack><Stack shouldWrapChildren direction="row" spacing="2x">
  <Popover trigger="hover" nextToCursor>
    <PopoverTrigger>
      <Button>Next to cursor</Button>
    </PopoverTrigger>
    <PopoverContent>
      <PopoverBody>Lorem ipsum dolor sit amet</PopoverBody>
    </PopoverContent>
  </Popover>
  <Popover trigger="hover" followCursor>
    <PopoverTrigger>
      <Button>Follow cursor</Button>
    </PopoverTrigger>
    <PopoverContent>
      <PopoverBody>Lorem ipsum dolor sit amet</PopoverBody>
    </PopoverContent>
  </Popover>
</Stack>

Popover Placement

Since Popover is controlled by PopperJS, you can change the placement of Popover by passing the placement prop.

Although you may have specified the placement, Popover will try to reposition itself if there is not enough available space at the specified placement.


EDITABLE EXAMPLE
<Stack direction="column" spacing="2rem">
  <Stack shouldWrapChildren direction="row" spacing="2rem">
    <Popover placement="top">
      <PopoverTrigger>
        <Button minWidth="32x">Top</Button>
      </PopoverTrigger>
      <PopoverContent>
        <PopoverHeader>Confirmation!</PopoverHeader>
        <PopoverBody>Lorem ipsum dolor sit amet, consectetur adicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</PopoverBody>
      </PopoverContent>
    </Popover>
    <Popover placement="top-start">
      <PopoverTrigger>
        <Button minWidth="32x">Top-Start</Button>
      </PopoverTrigger>
      <PopoverContent>
        <PopoverHeader>Confirmation!</PopoverHeader>
        <PopoverBody>Lorem ipsum dolor sit amet, consectetur adicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</PopoverBody>
      </PopoverContent>
    </Popover>
    <Popover placement="top-end">
      <PopoverTrigger>
        <Button minWidth="32x">Top-End</Button>
      </PopoverTrigger>
      <PopoverContent>
        <PopoverHeader>Confirmation!</PopoverHeader>
        <PopoverBody>Lorem ipsum dolor sit amet, consectetur adicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</PopoverBody>
      </PopoverContent>
    </Popover>
  </Stack>
  <Stack shouldWrapChildren direction="row" spacing="2rem">
    <Popover placement="right">
      <PopoverTrigger>
        <Button minWidth="32x">Right</Button>
      </PopoverTrigger>
      <PopoverContent>
        <PopoverHeader>Confirmation!</PopoverHeader>
        <PopoverBody>Lorem ipsum dolor sit amet, consectetur adicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</PopoverBody>
      </PopoverContent>
    </Popover>
    <Popover placement="right-start">
      <PopoverTrigger>
        <Button minWidth="32x">Right-Start</Button>
      </PopoverTrigger>
      <PopoverContent>
        <PopoverHeader>Confirmation!</PopoverHeader>
        <PopoverBody>Lorem ipsum dolor sit amet, consectetur adicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</PopoverBody>
      </PopoverContent>
    </Popover>
    <Popover placement="right-end">
      <PopoverTrigger>
        <Button minWidth="32x">Right-End</Button>
      </PopoverTrigger>
      <PopoverContent>
        <PopoverHeader>Confirmation!</PopoverHeader>
        <PopoverBody>Lorem ipsum dolor sit amet, consectetur adicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</PopoverBody>
      </PopoverContent>
    </Popover>
  </Stack>
  <Stack shouldWrapChildren direction="row" spacing="2rem">
    <Popover placement="bottom">
      <PopoverTrigger>
        <Button minWidth="32x">Bottom</Button>
      </PopoverTrigger>
      <PopoverContent>
        <PopoverHeader>Confirmation!</PopoverHeader>
        <PopoverBody>Lorem ipsum dolor sit amet, consectetur adicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</PopoverBody>
      </PopoverContent>
    </Popover>
    <Popover placement="bottom-start">
      <PopoverTrigger>
        <Button minWidth="32x">Bottom-Start</Button>
      </PopoverTrigger>
      <PopoverContent>
        <PopoverHeader>Confirmation!</PopoverHeader>
        <PopoverBody>Lorem ipsum dolor sit amet, consectetur adicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</PopoverBody>
      </PopoverContent>
    </Popover>
    <Popover placement="bottom-end">
      <PopoverTrigger>
        <Button minWidth="32x">Bottom-End</Button>
      </PopoverTrigger>
      <PopoverContent>
        <PopoverHeader>Confirmation!</PopoverHeader>
        <PopoverBody>Lorem ipsum dolor sit amet, consectetur adicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</PopoverBody>
      </PopoverContent>
    </Popover>
  </Stack>
  <Stack shouldWrapChildren direction="row" spacing="2rem">
    <Popover placement="left">
      <PopoverTrigger>
        <Button minWidth="32x">Left</Button>
      </PopoverTrigger>
      <PopoverContent>
        <PopoverHeader>Confirmation!</PopoverHeader>
        <PopoverBody>Lorem ipsum dolor sit amet, consectetur adicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</PopoverBody>
      </PopoverContent>
    </Popover>
    <Popover placement="left-start">
      <PopoverTrigger>
        <Button minWidth="32x">Left-Start</Button>
      </PopoverTrigger>
      <PopoverContent>
        <PopoverHeader>Confirmation!</PopoverHeader>
        <PopoverBody>Lorem ipsum dolor sit amet, consectetur adicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</PopoverBody>
      </PopoverContent>
    </Popover>
    <Popover placement="left-end">
      <PopoverTrigger>
        <Button minWidth="32x">Left-End</Button>
      </PopoverTrigger>
      <PopoverContent>
        <PopoverHeader>Confirmation!</PopoverHeader>
        <PopoverBody>Lorem ipsum dolor sit amet, consectetur adicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</PopoverBody>
      </PopoverContent>
    </Popover>
  </Stack>
</Stack><Stack direction="column" spacing="2rem">
  <Stack shouldWrapChildren direction="row" spacing="2rem">
    <Popover placement="top">
      <PopoverTrigger>
        <Button minWidth="32x">Top</Button>
      </PopoverTrigger>
      <PopoverContent>
        <PopoverHeader>Confirmation!</PopoverHeader>
        <PopoverBody>Lorem ipsum dolor sit amet, consectetur adicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</PopoverBody>
      </PopoverContent>
    </Popover>
    <Popover placement="top-start">
      <PopoverTrigger>
        <Button minWidth="32x">Top-Start</Button>
      </PopoverTrigger>
      <PopoverContent>
        <PopoverHeader>Confirmation!</PopoverHeader>
        <PopoverBody>Lorem ipsum dolor sit amet, consectetur adicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</PopoverBody>
      </PopoverContent>
    </Popover>
    <Popover placement="top-end">
      <PopoverTrigger>
        <Button minWidth="32x">Top-End</Button>
      </PopoverTrigger>
      <PopoverContent>
        <PopoverHeader>Confirmation!</PopoverHeader>
        <PopoverBody>Lorem ipsum dolor sit amet, consectetur adicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</PopoverBody>
      </PopoverContent>
    </Popover>
  </Stack>
  <Stack shouldWrapChildren direction="row" spacing="2rem">
    <Popover placement="right">
      <PopoverTrigger>
        <Button minWidth="32x">Right</Button>
      </PopoverTrigger>
      <PopoverContent>
        <PopoverHeader>Confirmation!</PopoverHeader>
        <PopoverBody>Lorem ipsum dolor sit amet, consectetur adicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</PopoverBody>
      </PopoverContent>
    </Popover>
    <Popover placement="right-start">
      <PopoverTrigger>
        <Button minWidth="32x">Right-Start</Button>
      </PopoverTrigger>
      <PopoverContent>
        <PopoverHeader>Confirmation!</PopoverHeader>
        <PopoverBody>Lorem ipsum dolor sit amet, consectetur adicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</PopoverBody>
      </PopoverContent>
    </Popover>
    <Popover placement="right-end">
      <PopoverTrigger>
        <Button minWidth="32x">Right-End</Button>
      </PopoverTrigger>
      <PopoverContent>
        <PopoverHeader>Confirmation!</PopoverHeader>
        <PopoverBody>Lorem ipsum dolor sit amet, consectetur adicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</PopoverBody>
      </PopoverContent>
    </Popover>
  </Stack>
  <Stack shouldWrapChildren direction="row" spacing="2rem">
    <Popover placement="bottom">
      <PopoverTrigger>
        <Button minWidth="32x">Bottom</Button>
      </PopoverTrigger>
      <PopoverContent>
        <PopoverHeader>Confirmation!</PopoverHeader>
        <PopoverBody>Lorem ipsum dolor sit amet, consectetur adicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</PopoverBody>
      </PopoverContent>
    </Popover>
    <Popover placement="bottom-start">
      <PopoverTrigger>
        <Button minWidth="32x">Bottom-Start</Button>
      </PopoverTrigger>
      <PopoverContent>
        <PopoverHeader>Confirmation!</PopoverHeader>
        <PopoverBody>Lorem ipsum dolor sit amet, consectetur adicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</PopoverBody>
      </PopoverContent>
    </Popover>
    <Popover placement="bottom-end">
      <PopoverTrigger>
        <Button minWidth="32x">Bottom-End</Button>
      </PopoverTrigger>
      <PopoverContent>
        <PopoverHeader>Confirmation!</PopoverHeader>
        <PopoverBody>Lorem ipsum dolor sit amet, consectetur adicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</PopoverBody>
      </PopoverContent>
    </Popover>
  </Stack>
  <Stack shouldWrapChildren direction="row" spacing="2rem">
    <Popover placement="left">
      <PopoverTrigger>
        <Button minWidth="32x">Left</Button>
      </PopoverTrigger>
      <PopoverContent>
        <PopoverHeader>Confirmation!</PopoverHeader>
        <PopoverBody>Lorem ipsum dolor sit amet, consectetur adicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</PopoverBody>
      </PopoverContent>
    </Popover>
    <Popover placement="left-start">
      <PopoverTrigger>
        <Button minWidth="32x">Left-Start</Button>
      </PopoverTrigger>
      <PopoverContent>
        <PopoverHeader>Confirmation!</PopoverHeader>
        <PopoverBody>Lorem ipsum dolor sit amet, consectetur adicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</PopoverBody>
      </PopoverContent>
    </Popover>
    <Popover placement="left-end">
      <PopoverTrigger>
        <Button minWidth="32x">Left-End</Button>
      </PopoverTrigger>
      <PopoverContent>
        <PopoverHeader>Confirmation!</PopoverHeader>
        <PopoverBody>Lorem ipsum dolor sit amet, consectetur adicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</PopoverBody>
      </PopoverContent>
    </Popover>
  </Stack>
</Stack>

Accessibility

The word "trigger" refers to the children of PopoverTrigger.

Keyboard and focus

When Popover is opened, the focus status is moved to PopoverContent. If initialFocusRef is set, then the focus status is moved to the element with the related reference (ref).
When Popover is closed, the focus status returns to the trigger. If you set returnFocusOnClose to false, the focus status will not return.
If trigger is set to hover:
- Focusing on or mousing over the trigger will open Popover.
- Blurring or mousing out of the trigger will close Popover. If you move your mouse into PopoverContent, Popover remains visible.
If trigger is set to click:
- Clicking the trigger or using the Space or Enter key when the focus status is on the trigger will open Popover.
- Clicking the trigger again will close Popover.
Hitting the Esc key while Popover is open and the focus status is within PopoverContent will close Popover. If you set closeOnEsc to false, Popover will not close.
Clicking outside or blurring out of PopoverContent closes Popover. If you set closeOnBlur to false, Popover will not close.

ARIA attributes

If the trigger is set to click, the role of the PopoverContent element is set to dialog. If the trigger is set to hover, the PopoverContent role is set to tooltip.
PopoverContent has aria-labelledby set to the id attribute of PopoverHeader.
PopoverContent has aria-describedby set to the id attribute of PopoverBody.
PopoverContent has aria-hidden set to true or false depending on the open/closed state of Popover.
The trigger has aria-haspopup set to true to denote that it triggers a popover.
The trigger has aria-controls set to the 'id' attribute of PopoverContent to associate the popover with the trigger.
The trigger has aria-expanded set to true or false depending on the open/closed state of the popover.

Props

Popover

Name	Type	Default	Description
isOpen	boolean		If `true`, the popover is shown.
initialFocusRef	React.Ref		The `ref` of the element that should receive the focus status when the popover opens.
trigger	string	'click'	The interaction that triggers the popover. One of: `'click'`, `'hover'`
placement	PopperJS.placement	'bottom'	Position the popover relative to the trigger element as well as surrounding elements. Possible values: `'top'`, `'bottom'`, `'right'`, `'left'`, `'top-start'`, `'top-end'`, `'bottom-start'`, `'bottom-end'`, `'right-start'`, `'right-end'`, `'left-start'`, `'left-end'`
returnFocusOnClose	boolean	true	If `true`, the popover will return the focus status to the trigger when closing.
closeOnBlur	boolean	true	If `true`, the popover will close when you use the tab key or click outside the popover dialog.
closeOnEsc	boolean	true	If `true`, the popover will close when you press the `esc` key.
children	ReactNode, (props: InternalState) => ReactNode		The children of the popover.
hideArrow	boolean		If `true`, hide the arrow tip on the popover.
skidding	number	0	Displaces the popover (in pixels) along the reference element. Used by `popper.js`
distance	number	4	Displaces the popover (in pixels) away from, or toward, the reference. Used by `popper.js`
delay	number or object	{ show: 0, hide: 100 }	If `trigger` is hover, delay showing and hiding the popover (ms). Object structure is: `delay={{ show: 500, hide: 100 }}`
usePortal	boolean	true	If `true`, the popover is displayed with a `Portal`. Rendering content inside a Portal allows the popover content to escape the physical bounds of its parent while still being positioned correctly relative to its target.
onOpen	() => void		A callback called when the popover opens.
onClose	() => void		A callback called when the popover closes.
nextToCursor	boolean		Popover will next to mouse cursor when mouse enter the reference.
followCursor	boolean		Popover will follow mouse cursor when mouse move on the reference.
arrowAt	string		The arrow is at the position of the popover. Possible values: `'left'`, `'right'`, `'top'`, `'bottom'`

Popover

Import

Basic Usage

Focus an element when Popover opens

Accessing Internal state

Controlled Usage

Customizing Popover

Hide arrow

Offset position

Hover Trigger

Mouse tracking

Popover Placement

Accessibility

Keyboard and focus

ARIA attributes

Props

Popover

PopoverTrigger

PopoverContent

PopoverHeader

PopoverBody

PopoverFooter

Focus an element when `Popover` opens