Popover

Overview

Popover is a component that floats around its anchor element. It's commonly used for building other components such as dropdowns, tooltips, combobox, etc.

When to use:

  • Wanting to show additional content or information.

Implementation

Edit the code below to see your changes live!

function Example() {
  const [isOpen, setIsOpen] = useState(false);
  const [buttonRef, setButtonRef] = useState<HTMLButtonElement | null>(null);

  return (
    <>
      <Button onClick={() => setIsOpen(true)} ref={setButtonRef}>
        Open Popover
      </Button>
      <Popover
        anchorElement={buttonRef}
        isOpen={isOpen}
        label="Example Popover"
        onClose={() => setIsOpen(false)}
      >
        <Text>This is the popover content!</Text>
      </Popover>
    </>
  );
}

Props

Prop name
Type
Default
Description
anchorElement *Element | null

Element to be used as an anchor for the Popover.

isOpen *boolean

Specifies if the Popover is open or closed.

label *string

Label used for accessibility purposes, this label will be set as an aria-label on the popover.

closeOnClickOutsidebooleantrue

Determines if onClose gets called when clicking outside of the popover.

closeOnEscKeybooleantrue

Determines if onClose gets called when pressing the Esc key.

matchAnchorElementWidthbooleanfalse

If set to true, the Popover will have the same width as its anchor element.

skiddingnumber0

Determines the offset along the anchorElement.

distancenumber4

Determines the offset away from the anchorElement.

onClose() => void

Callback that runs when the popover should close.

placementauto | auto-end | auto-start | bottom | bottom-end | bottom-start | left | left-end | left-start | right | right-end | right-start | top | top-end | top-startauto

Sets the position of the Popover.

Props ending with * are required

Inherited

Expand

Box Props

Expand

Padding Props

Do's and Don'ts

Do
Tie popup to click or hover events on elements.
Use concise textual phrases.
Don't
Always display the popover.