Popover
A Popover is a transient UI element that displays contextual information or actions related to a trigger element. It appears on user interaction and disappears when dismissed, typically used for additional details, settings, or quick actions.
Introduction
A Popover is a floating UI component that provides additional context or actions when triggered. It appears next to the trigger element and disappears when dismissed. Popovers help users access relevant information without cluttering the interface.
Popovers help enhance user experience by keeping interfaces clean while allowing users to access extra details without navigating away from the page.
Visual representation
A popover container that appears near the trigger, containing content.A trigger element (such as a button) that activates the popover.
A button (or other interactive element) that activates the popover. It has a data-popover-target attribute pointing to the popover's ID.
A div with data-popover that contains the popover content. It uses role="tooltip" for accessibility and has styling classes for positioning and visibility.
Code structure
This is the basic code structure of how an popover component has be created. div labelled with ` aegov-popover ` will add the necessary styles.
<button data-popover-target="popover-default" type="button" class="aegov-btn">--Button text--</button>
<div data-popover id="popover-default" role="tooltip" class="aegov-popover w-64">
<div class="popover-header bg-aeblack-50 px-3 py-2">
<div class="font-semibold text-aeblack-900">--Popover title--</div>
</div>
<div class="popover-body px-3 py-2 text-aeblack-600">
<p class="mb-0">--Description--</p>
</div>
<div data-popper-arrow></div>
</div>
Code structure for React
The Popover component in React allows you to display supplementary content in a temporary, floating panel. Its basic structure involves a PopoverRoot that wraps both the trigger and the content.
The PopoverTrigger, often associated with an interactive element like a button, controls the visibility of the popover. The actual content to be displayed is placed within the PopoverContent component, which can house various elements such as headings, text, and action buttons.
<PopoverRoot>
<PopoverTrigger asChild>
<button className="inline-flex items-center justify-center rounded-md bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2">
Open Popover
</button>
</PopoverTrigger>
<PopoverContent>
<div className="flex flex-col gap-4">
<h4 className="text-lg font-semibold text-gray-900">Popover Title</h4>
<p className="text-sm text-gray-500">
This is a description text that can contain any content you want to display in the popover
</p>
<div className="flex justify-end">
<button className="rounded-md bg-primary-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600">
Action
</button>
</div>
</div>
</PopoverContent>
</PopoverRoot>
Variations
Variations are different versions of this component that you may use within your website. The choice of what variation is useful should be based on the user experience study and layout design applied to the page of your website.
Default Popover
A standard popover with a title and a short description. It is useful for providing concise, contextual information.
Flexible Popover
A customizable popover that allows users to include text, images, links, or any other content to enhance the user experience.
Behaviour
Popovers follow a set of standard behaviors to ensure usability and consistency across different interactions:
- Triggering:
- Clicking the trigger button opens the popover.
- Clicking outside the popover closes it.
- Pressing the Escape key also closes the popover.
- Triggering:
- Clicking the trigger button opens the popover.
- Clicking outside the popover closes it.
- Pressing the Escape key also closes the popover.
- Focus Management:
- When the popover is opened, keyboard focus should move inside it.
- Users can navigate the popover content using the Tab key.
- Closing the popover should return focus to the trigger element.
- Dismissal:
- Clicking outside the popover or pressing the Escape key will close it.
- The popover should not close when interacting with elements inside it (e.g., links or buttons).
- Content Adaptability:
- The flexible popover can accommodate rich content, including images and links.
- If content overflows, scrolling should be enabled inside the popover.
Accessibility
- Semantic HTML: The button element is used for interaction, ensuring it is keyboard-focusable.
-
role="tooltip": This role helps assistive technologies recognize the popover as a tooltip-like element. -
Keyboard Navigation: Users can navigate to the button using the
Tab keyand activate popover.
Usage
- Use popovers for short, relevant contextual information.
- Avoid placing critical content inside popovers, as they may be dismissed unintentionally.
- Ensure popover content is accessible and responsive across different screen sizes.
Test popover positioning in various device orientations.
Where to use an Popover?
- Forms & Inputs: Display extra guidance, such as password requirements.
- Tooltips & Explanations: Provide additional details without cluttering the UI.
- Quick Actions: Offer extra functionality in a compact way.
