A NSW Government website
Design System v3.17.5

Popover

A floating box controlled by a trigger element.

The popover component is used to reveal additional content and functionalities. Its visibility is triggered by a control element (e.g., button).

Popovers remain actively open until a user dismisses it in one of the following ways:

  • Presses the Esc key
  • Clicks outside of the Popover
  • Performs another action that closes the Popover

When to avoid

  • Do not hide important information inside of a popover that the user may need in order to complete a task or workflow.
  • Do not use on non-interactive elements (for example, div, span, p).
  • Do not use if the popover needs take up a large amount of the size of the screen.
  • Do not have multiple popovers open at the same time.
  • Do not nest one popover within another popover.

Accessibility

All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

Popover keyboard interaction and focus

  • Opens via the Enter or Space keys, or by clicking the trigger element.
  • On open, focus moves into the Popover container to navigate elements inside with the Tab key.
  • Dismissed by tabbing out of the Popover, pressing the Escape key, or clicking outside.
  • When dismissed, focus returns to the trigger element.

ARIA attributes

  • The trigger element has aria-expanded set to true or false based on the open state.
  • The trigger element has aria-controls set to the id of the Popover element.
  • The trigger element has aria-haspopup set to the suitable role attribute of the Popover, depending on the type of content.

Position

Places the Popover relative to the trigger element.

Top

Family rebate

Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.

Get startedopen_in_new

Family rebate

Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.

Get startedopen_in_new

Family rebate

Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.

Get startedopen_in_new

Right

Family rebate

Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.

Get startedopen_in_new

Family rebate

Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.

Get startedopen_in_new

Family rebate

Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.

Get startedopen_in_new

Bottom

Family rebate

Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.

Get startedopen_in_new

Family rebate

Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.

Get startedopen_in_new

Family rebate

Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.

Get startedopen_in_new

Left

Family rebate

Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.

Get startedopen_in_new

Family rebate

Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.

Get startedopen_in_new

Family rebate

Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.

Get startedopen_in_new

Offset

A data-attribute data-popover-gap argument that offsets the distance between the trigger and Popover.

Family rebate

Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.

Get startedopen_in_new

Family rebate

Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.

Get startedopen_in_new

Family rebate

Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.

Get startedopen_in_new

Family rebate

Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.

Get startedopen_in_new