Popover

Javascript required HTML component React component

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.

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.

A popover container that appears near the trigger, containing content.A trigger element (such as a button) that activates the popover.

<button data-popover-target="popover-default" type="button" class="aegov-btn">Default popover</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">Engaging and insightful content for an enriching experience.</p>
    </div>
    <div data-popper-arrow></div>
</div>

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.

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>

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.

A standard popover with a title and a short description. It is useful for providing concise, contextual information.

<button data-popover-target="popover-default" type="button" class="aegov-btn">Default popover</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">Engaging and insightful content for an enriching experience.</p>
	</div>
	<div data-popper-arrow></div>
</div>

A customizable popover that allows users to include text, images, links, or any other content to enhance the user experience.

<button data-popover-target="popover-flexible" type="button" class="aegov-btn">Flexible Popover</button>
<div data-popover id="popover-flexible" role="tooltip" class="aegov-popover w-64">
	<div class="popover-body px-3 py-2 text-aeblack-600">
		<p class="mb-0">Add text, images, links, or any content to enhance the user experience and share extra details.</p>
	</div>
	<div data-popper-arrow></div>
</div>

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.

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 key and activate popover.

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.

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.

Popover

Introduction

Visual representation

Code structure

Variations

Default Popover

Flexible Popover

Behaviour

Accessibility

Usage

Where to use an Popover?

on this page

Sustainable by design