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:
All components are responsive and meet WCAG 2.1 AA accessibility guidelines.
Enter
or Space
keys, or by clicking the trigger element.Tab
key.Escape
key, or clicking outside.aria-expanded
set to true
or false
based on the open state.aria-controls
set to the id
of the Popover element.aria-haspopup
set to the suitable role
attribute of the Popover, depending on the type of content.Places the Popover relative to the trigger element.
Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.
Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.
Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.
Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.
Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.
Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.
Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.
Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.
Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.
Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.
Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.
Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.
A data-attribute data-popover-gap
argument that offsets the distance between the trigger and Popover.
Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.
Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.
Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.
Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.