Popover

Popovers are containers used to display transient content such as options and actions.

import {
  QPopover,
  QPopoverActions,
  QPopoverDescription,
  QPopoverLabel,
} from "@qui/react"

Accessibility

The anchor element is automatically associated with the popover:
- When the popover is visible, the anchor element receives the aria-controls and aria-expanded attributes.
- The anchor element's aria-haspopup is always set to 'true'.
When the QPopoverLabel component is supplied, the overlay panel's aria-labelledby attribute is set to the id of the label.
When the QPopoverDescription component is supplied, the overlay panel's aria-describedby attribute is set to the id of the label.

NOTE

Don't worry about supplying id's to the label, description or popover. If these are not provided, they will be generated automatically.

Examples

Showcase

The popover can only be used as a child of the Overlay Panel component.

import {ReactNode} from "react"

import {
  QButton,
  QOverlayPanel,
  QPopover,
  QPopoverActions,
  QPopoverDescription,
  QPopoverLabel,
} from "@qui/react"

export default function Showcase(): ReactNode {
  return (
    <QOverlayPanel
      anchor={
        <QButton color="primary" variant="fill">
          Action
        </QButton>
      }
      arrow
      placement="top"
    >
      {({setOpen}) => (
        <QPopover className="max-w-[240px]">
          <QPopoverLabel>Popover Label</QPopoverLabel>
          <QPopoverDescription>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit
          </QPopoverDescription>
          <QPopoverActions>
            <QButton onClick={() => setOpen(false)} variant="outline">
              Cancel
            </QButton>
            <QButton
              color="primary"
              onClick={() => setOpen(false)}
              variant="fill"
            >
              Confirm
            </QButton>
          </QPopoverActions>
        </QPopover>
      )}
    </QOverlayPanel>
  )
}

API

QPopover

Name & Description	Option(s)	Default
as The component used for the root node. It can be a React component or element.	\| ElementType \| ComponentType	'div'
children React children prop.	ReactNode
className The className property of the Element interface gets and sets the value of the class attribute of the specified element.	string
size Modifies the size of the label, description, and dismiss button.	\| 's' \| 'm' \| 'l'	'm'
style The style global attribute contains CSS styling declarations to be applied to the element.	CSSProperties

Type

| ElementType
| ComponentType

Default

'div'

Description

The component used for the root node. It can be a React component or element.

children

Type

ReactNode

Description

React children prop.

className

Type

string

Description

The className property of the Element interface gets and sets the value of the class attribute of the specified element.

size

Type

| 's'
| 'm'
| 'l'

Default

'm'

Description

Modifies the size of the label, description, and dismiss button.

style

Type

CSSProperties

Description

The style global attribute contains CSS styling declarations to be applied to the element.

QPopoverLabel

Name & Description	Option(s)	Default
as The component used for the root node. It can be a React component or element.	\| ElementType \| ComponentType	'div'
children React children prop.	ReactNode
className The className property of the Element interface gets and sets the value of the class attribute of the specified element.	string
id HTML id attribute. If omitted, a random value will be randomly generated for optimal accessibility.	string
style The style global attribute contains CSS styling declarations to be applied to the element.	CSSProperties

Type

| ElementType
| ComponentType

Default

'div'

Description

The component used for the root node. It can be a React component or element.

children

Type

ReactNode

Description

React children prop.

className

Type

string

Description

The className property of the Element interface gets and sets the value of the class attribute of the specified element.

Type

string

Description

HTML id attribute. If omitted, a random value will be randomly generated for optimal accessibility.

style

Type

CSSProperties

Description

The style global attribute contains CSS styling declarations to be applied to the element.

QPopoverDescription

Name & Description	Option(s)	Default
as The component used for the root node. It can be a React component or element.	\| ElementType \| ComponentType	'div'
children React children prop.	ReactNode
className The className property of the Element interface gets and sets the value of the class attribute of the specified element.	string
id HTML id attribute. If omitted, a random value will be randomly generated for optimal accessibility.	string
style The style global attribute contains CSS styling declarations to be applied to the element.	CSSProperties

Type

| ElementType
| ComponentType

Default

'div'

Description

The component used for the root node. It can be a React component or element.

children

Type

ReactNode

Description

React children prop.

className

Type

string

Description

The className property of the Element interface gets and sets the value of the class attribute of the specified element.

Type

string

Description

HTML id attribute. If omitted, a random value will be randomly generated for optimal accessibility.

style

Type

CSSProperties

Description

The style global attribute contains CSS styling declarations to be applied to the element.

QPopoverActions

Name & Description	Option(s)	Default
as The component used for the root node. It can be a React component or element.	\| ElementType \| ComponentType	'div'
children React children prop.	ReactNode
className The className property of the Element interface gets and sets the value of the class attribute of the specified element.	string
style The style global attribute contains CSS styling declarations to be applied to the element.	CSSProperties