Popover
Demonstration
Many benefit programs are meant for people of a specific age group. Sharing your age will help us choose the programs that will be most helpful to you right now. The information you share for the purposes of public benefits screening will be anonymous.
Code
Popovers are used to provide additional context. They are most commonly used within the Question Component to describe why certain questions appear in forms.
They use the aria-describedby attribute to associate the popover text with the toggling element. The role attribute of the popover is set to tooltip.
They can consolidate the amount of visible text, however, a non-urgent Alert can also be used to display additional information and context as well.
Global Script
The Popover requires JavaScript for showing and hiding. To initialize the Popover and Disclaimer instances from the global script use the following code:
<!-- Global Script --> <script src="https://cdn.jsdelivr.net/gh/nycopportunity/standard@v0.0.20/dist/js/default.js"></script> <script> var Standard = new Default(); Standard.popover(); </script>
This will attach event listeners for toggling the Popover.
Module Import
For module imports, import the Popover from the source. You must pass a DOM selection of each Popover to a new instance of the class. A selector reference is stored in the class.
import Popover from '@nycopportunity/standard/src/components/popover/popover';
let elements = document.querySelectorAll(Popover.selector);
elements.forEach(element => {
new Popover(element);
});