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 designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.
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.
Get started (opens in new window)
Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.
Get started (opens in new window)
Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.
Get started (opens in new window)
<div class="nsw-list nsw-list--8">
<button type="button" class="nsw-button nsw-button--dark-outline js-popover" aria-controls="popover-top" data-popover-position="top" data-popover-gap="10"><span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">info</span><span>Open Top</span></button>
<div id="popover-top" class="nsw-popover">
<div class="nsw-p-sm">
<h4>Family rebate</h4>
<p>Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.</p>
<p><a class="js-link" href="https://digital.nsw.gov.au">
<span>Get started</span><span class="material-icons nsw-material-icons" title="(opens in new window)">open_in_new</span>
</a>
</p>
</div>
</div>
<button type="button" class="nsw-button nsw-button--dark-outline js-popover" aria-controls="popover-top-start" data-popover-position="top-start" data-popover-gap="10"><span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">info</span><span>Open Top Start</span></button>
<div id="popover-top-start" class="nsw-popover">
<div class="nsw-p-sm">
<h4>Family rebate</h4>
<p>Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.</p>
<p><a class="js-link" href="https://digital.nsw.gov.au">
<span>Get started</span><span class="material-icons nsw-material-icons" title="(opens in new window)">open_in_new</span>
</a>
</p>
</div>
</div>
<button type="button" class="nsw-button nsw-button--dark-outline js-popover" aria-controls="popover-top-end" data-popover-position="top-end" data-popover-gap="10"><span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">info</span><span>Open Top End</span></button>
<div id="popover-top-end" class="nsw-popover">
<div class="nsw-p-sm">
<h4>Family rebate</h4>
<p>Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.</p>
<p><a class="js-link" href="https://digital.nsw.gov.au">
<span>Get started</span><span class="material-icons nsw-material-icons" title="(opens in new window)">open_in_new</span>
</a>
</p>
</div>
</div>
</div>
Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.
Get started (opens in new window)
Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.
Get started (opens in new window)
Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.
Get started (opens in new window)
<div class="nsw-list nsw-list--8">
<button type="button" class="nsw-button nsw-button--dark-outline js-popover" aria-controls="popover-right" data-popover-position="right" data-popover-gap="10"><span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">info</span><span>Open Right</span></button>
<div id="popover-right" class="nsw-popover">
<div class="nsw-p-sm">
<h4>Family rebate</h4>
<p>Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.</p>
<p><a class="js-link" href="https://digital.nsw.gov.au">
<span>Get started</span><span class="material-icons nsw-material-icons" title="(opens in new window)">open_in_new</span>
</a>
</p>
</div>
</div>
<button type="button" class="nsw-button nsw-button--dark-outline js-popover" aria-controls="popover-right-start" data-popover-position="right-start" data-popover-gap="10"><span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">info</span><span>Open Right Start</span></button>
<div id="popover-right-start" class="nsw-popover">
<div class="nsw-p-sm">
<h4>Family rebate</h4>
<p>Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.</p>
<p><a class="js-link" href="https://digital.nsw.gov.au">
<span>Get started</span><span class="material-icons nsw-material-icons" title="(opens in new window)">open_in_new</span>
</a>
</p>
</div>
</div>
<button type="button" class="nsw-button nsw-button--dark-outline js-popover" aria-controls="popover-right-end" data-popover-position="right-end" data-popover-gap="10"><span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">info</span><span>Open Right End</span></button>
<div id="popover-right-end" class="nsw-popover">
<div class="nsw-p-sm">
<h4>Family rebate</h4>
<p>Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.</p>
<p><a class="js-link" href="https://digital.nsw.gov.au">
<span>Get started</span><span class="material-icons nsw-material-icons" title="(opens in new window)">open_in_new</span>
</a>
</p>
</div>
</div>
</div>
Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.
Get started (opens in new window)
Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.
Get started (opens in new window)
Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.
Get started (opens in new window)
<div class="nsw-list nsw-list--8">
<button type="button" class="nsw-button nsw-button--dark-outline js-popover" aria-controls="popover-bottom" data-popover-position="bottom" data-popover-gap="10"><span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">info</span><span>Open Bottom</span></button>
<div id="popover-bottom" class="nsw-popover">
<div class="nsw-p-sm">
<h4>Family rebate</h4>
<p>Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.</p>
<p><a class="js-link" href="https://digital.nsw.gov.au">
<span>Get started</span><span class="material-icons nsw-material-icons" title="(opens in new window)">open_in_new</span>
</a>
</p>
</div>
</div>
<button type="button" class="nsw-button nsw-button--dark-outline js-popover" aria-controls="popover-bottom-start" data-popover-position="bottom-start" data-popover-gap="10"><span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">info</span><span>Open Bottom Start</span></button>
<div id="popover-bottom-start" class="nsw-popover">
<div class="nsw-p-sm">
<h4>Family rebate</h4>
<p>Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.</p>
<p><a class="js-link" href="https://digital.nsw.gov.au">
<span>Get started</span><span class="material-icons nsw-material-icons" title="(opens in new window)">open_in_new</span>
</a>
</p>
</div>
</div>
<button type="button" class="nsw-button nsw-button--dark-outline js-popover" aria-controls="popover-bottom-end" data-popover-position="bottom-end" data-popover-gap="10"><span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">info</span><span>Open Bottom End</span></button>
<div id="popover-bottom-end" class="nsw-popover">
<div class="nsw-p-sm">
<h4>Family rebate</h4>
<p>Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.</p>
<p><a class="js-link" href="https://digital.nsw.gov.au">
<span>Get started</span><span class="material-icons nsw-material-icons" title="(opens in new window)">open_in_new</span>
</a>
</p>
</div>
</div>
</div>
Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.
Get started (opens in new window)
Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.
Get started (opens in new window)
Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.
Get started (opens in new window)
<div class="nsw-list nsw-list--8">
<button type="button" class="nsw-button nsw-button--dark-outline js-popover" aria-controls="popover-left" data-popover-position="left" data-popover-gap="10"><span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">info</span><span>Open Left</span></button>
<div id="popover-left" class="nsw-popover">
<div class="nsw-p-sm">
<h4>Family rebate</h4>
<p>Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.</p>
<p><a class="js-link" href="https://digital.nsw.gov.au">
<span>Get started</span><span class="material-icons nsw-material-icons" title="(opens in new window)">open_in_new</span>
</a>
</p>
</div>
</div>
<button type="button" class="nsw-button nsw-button--dark-outline js-popover" aria-controls="popover-left-start" data-popover-position="left-start" data-popover-gap="10"><span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">info</span><span>Open Left Start</span></button>
<div id="popover-left-start" class="nsw-popover">
<div class="nsw-p-sm">
<h4>Family rebate</h4>
<p>Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.</p>
<p><a class="js-link" href="https://digital.nsw.gov.au">
<span>Get started</span><span class="material-icons nsw-material-icons" title="(opens in new window)">open_in_new</span>
</a>
</p>
</div>
</div>
<button type="button" class="nsw-button nsw-button--dark-outline js-popover" aria-controls="popover-left-end" data-popover-position="left-end" data-popover-gap="10"><span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">info</span><span>Open Left End</span></button>
<div id="popover-left-end" class="nsw-popover">
<div class="nsw-p-sm">
<h4>Family rebate</h4>
<p>Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.</p>
<p><a class="js-link" href="https://digital.nsw.gov.au">
<span>Get started</span><span class="material-icons nsw-material-icons" title="(opens in new window)">open_in_new</span>
</a>
</p>
</div>
</div>
</div>
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.
Get started (opens in new window)
Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.
Get started (opens in new window)
Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.
Get started (opens in new window)
Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.
Get started (opens in new window)
<div class="nsw-list nsw-list--8">
<button type="button" class="nsw-button nsw-button--dark-outline js-popover" aria-controls="popover-20" data-popover-position="top" data-popover-gap="20"><span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">info</span><span>Open Top</span></button>
<div id="popover-20" class="nsw-popover">
<div class="nsw-p-sm">
<h4>Family rebate</h4>
<p>Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.</p>
<p><a class="js-link" href="https://digital.nsw.gov.au">
<span>Get started</span><span class="material-icons nsw-material-icons" title="(opens in new window)">open_in_new</span>
</a>
</p>
</div>
</div>
<button type="button" class="nsw-button nsw-button--dark-outline js-popover" aria-controls="popover-30" data-popover-position="top" data-popover-gap="30"><span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">info</span><span>Open Top</span></button>
<div id="popover-30" class="nsw-popover">
<div class="nsw-p-sm">
<h4>Family rebate</h4>
<p>Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.</p>
<p><a class="js-link" href="https://digital.nsw.gov.au">
<span>Get started</span><span class="material-icons nsw-material-icons" title="(opens in new window)">open_in_new</span>
</a>
</p>
</div>
</div>
<button type="button" class="nsw-button nsw-button--dark-outline js-popover" aria-controls="popover-40" data-popover-position="top" data-popover-gap="40"><span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">info</span><span>Open Top</span></button>
<div id="popover-40" class="nsw-popover">
<div class="nsw-p-sm">
<h4>Family rebate</h4>
<p>Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.</p>
<p><a class="js-link" href="https://digital.nsw.gov.au">
<span>Get started</span><span class="material-icons nsw-material-icons" title="(opens in new window)">open_in_new</span>
</a>
</p>
</div>
</div>
<button type="button" class="nsw-button nsw-button--dark-outline js-popover" aria-controls="popover-50" data-popover-position="top" data-popover-gap="50"><span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">info</span><span>Open Top</span></button>
<div id="popover-50" class="nsw-popover">
<div class="nsw-p-sm">
<h4>Family rebate</h4>
<p>Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.</p>
<p><a class="js-link" href="https://digital.nsw.gov.au">
<span>Get started</span><span class="material-icons nsw-material-icons" title="(opens in new window)">open_in_new</span>
</a>
</p>
</div>
</div>
</div>