Popover Overview

---

Description

Pando’s <Popover /> is used display a non-modal dialog that floats around a trigger.

Note

Using popovers prevents information from being seen by default. When possible, consider writing clear, succinct, always visible descriptions in body text.

Popover anatomy

1. Popover
2. Title
3. Content Slot
4. Close Button (optional)
5. Dismiss Button (optional)

Import

import {
  Popover,
  PopoverContent,
  PopoverTrigger,
  PopoverHeader,
  PopoverBody,
  PopoverDismissButton,
} from '@pluralsight/react'

Basic Usage

To display a popover, wrap the popover trigger and content with a <Popover /> component, use the <PopoverTrigger /> component to wrap the trigger, and the <PopoverContent /> component to wrap the content.

Popover is a controlled component, so you will manage the state of the popover within the parent component. You will pass the open prop to the <Popover /> component to control the visibility of the popover, and the onOpenChange prop to handle the state change.

import { useRef, useState } from 'react'
import {
  Button
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverHeader,
  PopoverBody
} from '@pluralsight/react'

export default function PopoverExample() {
  const [isOpen, setIsOpen] = useState(false)
  const ref = useRef()

  return (
    <Popover ref={ref} open={isOpen} onOpenChange={setIsOpen}>
      <PopoverTrigger
        onClick={() => setIsOpen((currentlyOpen) => !currentlyOpen)}
      >
        <Button>With Title</Button>
      </PopoverTrigger>
      <PopoverContent>
        <PopoverHeader>Popover Title</PopoverHeader>
        <PopoverBody>
          <p>Popover body text</p>
        </PopoverBody>
      </PopoverContent>
    </Popover>
  )
}

Props

Note: all props denoted with a ? are optional

Popover

Default

{
  open: false
  onOpenChange: null
  initialOpen?: false
  placement?: 'bottom'
  modal?: false
}

All Options

{
  open: boolean
  onOpenChange: (open: boolean) => void
  initialOpen?: boolean
  placement?: 'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end'
  modal?: boolean
}

PopoverTrigger

Trigger element

Pando does not require that you use any specific element to trigger the popover, only that you wrap that trigger element in the <PopoverTrigger ... /> component.

It is also not required that the child by a complete element. If you only pass a string as the child of <PopoverTrigger ... />, the popover trigger will default to the

Default

{
  children: null
  onClick: null
}

All Options

{
  children: React.ReactNode,
  onClick: () => void
  ...nativeHTMLDivAttributes
}

PopoverContent

Default

{
  children: null
}

All Options

{
  children: React.ReactNode
  ...nativeHTMLDivAttributes
}

PopoverHeader

Default

{
  children?: null,
  showDismiss?: false,
  close?: null
}

All Options

{
  children?: React.ReactNode,
  showDismiss?: boolean,
  close?: () => void
  ...nativeHTMLDivAttributes
}

PopoverBody

Default

{
  children: null
}

All Options

{
  children: React.ReactNode
  ...nativeHTMLDivAttributes
}

PopoverDismissButton

Default

{
  children: 'Dismiss'
  close: null
  ...nativeHTMLButtonAttributes
}

All Options

{
  children: string
  close: () => void
  ...nativeHTMLButtonAttributes
}