Popover

Used to display a non-modal dialog that floats around a trigger.

• View on Github
• View React Aria
• View on Figma

Anatomy

1. Trigger
2. Container
3. Content

Import

import { PopoverContent, PopoverProvider } from '@pluralsight/react'

The Popover shares the same components as the Modal family.

Usage

a11y Best Practices

Instead of using popovers and hiding important information, consider writing clear, succinct, always visible descriptions. If you have space, don't use tooltips or popovers. Just provide clear labels and sufficient body text.

Basic

To display a Popover, just wrap the trigger and popover content with a PopoverProvider and use the PopoverContent to wrap the body of the popover.

To open and close the Popover, use the show and close methods.

Result

Loading...

Live Editor

function PopoverExample() { const popoverRef = useRef(null) function handleShowPopover() { popoverRef.current.show() } function handleClosePopover() { popoverRef.current.close() } return ( <PopoverProvider> <Button onClick={handleShowPopover}>Show popover</Button> <PopoverContent bodyId="popover:body" headingId="popover:heading" ref={popoverRef} > <AlertDialogHeader> <AlertDialogHeading id="popover:heading"> Popover heading </AlertDialogHeading> <AlertDialogCloseIconButton onClick={handleClosePopover} /> </AlertDialogHeader> <AlertDialogBody id="popover:body"> <AlertDialogText> Text content for a popover component. Some additional text with an{' '} <TextLink href="#">Text Link</TextLink>. </AlertDialogText> <br /> <Button onClick={handleClosePopover} size="m"> Something </Button> </AlertDialogBody> </PopoverContent> </PopoverProvider> ) }

function PopoverExample() {
  const popoverRef = useRef(null)

  function handleShowPopover() {
    popoverRef.current.show()
  }

  function handleClosePopover() {
    popoverRef.current.close()
  }

  return (
    <PopoverProvider>
      <Button onClick={handleShowPopover}>Show popover</Button>

      <PopoverContent
        bodyId="popover:body"
        headingId="popover:heading"
        ref={popoverRef}
      >
        <AlertDialogHeader>
          <AlertDialogHeading id="popover:heading">
            Popover heading
          </AlertDialogHeading>
          <AlertDialogCloseIconButton onClick={handleClosePopover} />
        </AlertDialogHeader>

        <AlertDialogBody id="popover:body">
          <AlertDialogText>
            Text content for a popover component. Some additional text with an{' '}
            <TextLink href="#">Text Link</TextLink>.
          </AlertDialogText>
          <br />
          <Button onClick={handleClosePopover} size="m">
            Something
          </Button>
        </AlertDialogBody>
      </PopoverContent>
    </PopoverProvider>
  )
}

Positioning

To change the position of the Popover, add the position attribute to the Provider element. The values are top, bottom, left, and right.

Result

Loading...

Live Editor

function PopoverExample() { const popoverRef = useRef(null) function handleShowPopover() { popoverRef.current.show() } function handleClosePopover() { popoverRef.current.close() } return ( <PopoverProvider position="top"> <Button onClick={handleShowPopover}>Show popover</Button> <PopoverContent bodyId="popover:body" headingId="popover:heading" ref={popoverRef} > <AlertDialogHeader> <AlertDialogHeading id="popover:heading"> Popover heading </AlertDialogHeading> <AlertDialogCloseIconButton onClick={handleClosePopover} /> </AlertDialogHeader> <AlertDialogBody id="popover:body"> <AlertDialogText> Text content for a popover component. Some additional text with an{' '} <TextLink href="#">Text Link</TextLink>. </AlertDialogText> <br /> <Button onClick={handleClosePopover} size="m"> Something </Button> </AlertDialogBody> </PopoverContent> </PopoverProvider> ) }

function PopoverExample() {
  const popoverRef = useRef(null)

  function handleShowPopover() {
    popoverRef.current.show()
  }

  function handleClosePopover() {
    popoverRef.current.close()
  }

  return (
    <PopoverProvider position="top">
      <Button onClick={handleShowPopover}>Show popover</Button>

      <PopoverContent
        bodyId="popover:body"
        headingId="popover:heading"
        ref={popoverRef}
      >
        <AlertDialogHeader>
          <AlertDialogHeading id="popover:heading">
            Popover heading
          </AlertDialogHeading>
          <AlertDialogCloseIconButton onClick={handleClosePopover} />
        </AlertDialogHeader>

        <AlertDialogBody id="popover:body">
          <AlertDialogText>
            Text content for a popover component. Some additional text with an{' '}
            <TextLink href="#">Text Link</TextLink>.
          </AlertDialogText>
          <br />
          <Button onClick={handleClosePopover} size="m">
            Something
          </Button>
        </AlertDialogBody>
      </PopoverContent>
    </PopoverProvider>
  )
}

Customizing

You can customize the Popover the same way as you would the Dialog family.

Behavior

Do: use the Popover to display a message with links.

Don't: use the Popover to display a message without actionable content. Instead use the Tooltip.

API

PopoverProvider

Props

Name	Type	Description
position	string	The position of the Popover. Can be top, bottom, left, or right.

PopoverContent

Props

Name	Type	Description
bodyId	string	The id of the body element.
headingId	string	The id of the heading element.
ref	object	A ref to the PopoverContent.

Accessibility

The Popover shares the same accessibility as the Dialog family.