The Popover Component is a dynamic UI element designed to display additional content, such as tips, links, or actions, in a floating container attached to a trigger element. It serves as an essential tool for enhancing user engagement and providing contextual information without cluttering the page layout.
Anatomy
The anatomy of Popover Component consists of a trigger element that activates the popover, a floating panel for content, and an arrow pointing to the trigger. Inside the panel, it have titles, icon, text, buttons, container, optional area such as for an image or custom content, providing flexibility in presentation and functionality.
Properties
The Popover Component is designed with customizable properties to adapt to various UI design requirements, including size and orientation:
Size
Small size popover component is a compact option for brief content.
Medium size popover component is the standard size, suitable for a balance of text and interactive elements.
Large size popover component provides ample space for detailed information or complex content.
<!-- Small Popover --><plus-popoversize="sm"title="Small Popover"> <plus-buttonkind="outlined"size="sm">Small</plus-button> <divslot="content"> <plus-inputlabel="Label"placeholder="Enter something..."size="sm"></plus-input> </div></plus-popover><!-- Medium Popover --><plus-popoversize="md"title="Medium Popover"> <plus-buttonkind="outlined"size="md">Medium</plus-button> <divslot="content"> <plus-inputlabel="Label"placeholder="Enter something..."size="md"></plus-input> </div></plus-popover><!-- Large Popover --><plus-popoversize="lg"title="Large Popover"> <plus-buttonkind="outlined"size="lg">Large</plus-button> <divslot="content"> <plus-inputlabel="Label"placeholder="Enter something..."size="lg"></plus-input> </div></plus-popover>
Orientation
Orientation options determine the popover's position relative to its trigger element:
Right - Middle: Center-aligned to the right of the trigger.
Right - Up: Aligned to the right, positioned above the center.
Right - Down: Aligned to the right, positioned below the center.
Left - Middle: Center-aligned to the left of the trigger.
Left - Up: Aligned to the left, positioned above the center.
Left - Down: Aligned to the left, positioned below the center.
Top - Middle: Center-aligned above the trigger.
Top - Up: Positioned slightly higher than the middle top.
Top - Down: Positioned slightly lower than the middle top.
Bottom - Middle: Center-aligned below the trigger.
Bottom - Up: Positioned slightly higher than the middle bottom.
Bottom - Down: Positioned slightly lower than the middle bottom.
import React from'react';import { PlusPopover, PlusButton, PlusInput } from'@plusui/react';// Top Placement ExampleconstPopoverTop= () => ( <PlusPopoverplacement="top"title="User Info"description="Please enter your name."> <PlusButton>Top Popover</PlusButton> <divslot="content"> <PlusInputlabel="Name"placeholder="Enter your name..." /> </div> </PlusPopover>);// Bottom Placement ExampleconstPopoverBottom= () => ( <PlusPopoverplacement="bottom"title="Address Info"description="Please enter your address."> <PlusButton>Bottom Popover</PlusButton> <divslot="content"> <PlusInputlabel="Address"placeholder="Enter your address..." /> </div> </PlusPopover>);// Left Placement ExampleconstPopoverLeft= () => ( <PlusPopoverplacement="left"title="Security Question"description="What is your favorite color?"> <PlusButton>Left Popover</PlusButton> <divslot="content"> <PlusInputlabel="Answer"placeholder="Enter your answer..." /> </div> </PlusPopover>);exportdefault { PopoverTop, PopoverBottom, PopoverLeft,};
<!-- Top Placement Example --><plus-popoverplacement="top"title="User Info"description="Please enter your name."> <plus-button>Top Popover</plus-button> <divslot="content"> <plus-inputlabel="Name"placeholder="Enter your name..." /> </div></plus-popover><!-- Bottom Placement Example --><plus-popoverplacement="bottom"title="Address Info"description="Please enter your address."> <plus-button>Bottom Popover</plus-button> <divslot="content"> <plus-inputlabel="Address"placeholder="Enter your address..." /> </div></plus-popover><!-- Left Placement Example --><plus-popoverplacement="left"title="Security Question"description="What is your favorite color?"> <plus-button>Left Popover</plus-button> <divslot="content"> <plus-inputlabel="Answer"placeholder="Enter your answer..." /> </div></plus-popover>
<template><!-- Top Placement Example --> <plus-popoverplacement="top"title="User Info"description="Please enter your name."> <plus-button>Top Popover</plus-button> <divslot="content"> <plus-inputlabel="Name"placeholder="Enter your name..." /> </div> </plus-popover><!-- Bottom Placement Example --> <plus-popoverplacement="bottom"title="Address Info"description="Please enter your address."> <plus-button>Bottom Popover</plus-button> <divslot="content"> <plus-inputlabel="Address"placeholder="Enter your address..." /> </div> </plus-popover><!-- Left Placement Example --> <plus-popoverplacement="left"title="Security Question"description="What is your favorite color?"> <plus-button>Left Popover</plus-button> <divslot="content"> <plus-inputlabel="Answer"placeholder="Enter your answer..." /> </div> </plus-popover></template>
<!-- Top Placement Example --><plus-popoverplacement="top"title="User Info"description="Please enter your name."> <plus-button>Top Popover</plus-button> <divslot="content"> <plus-inputlabel="Name"placeholder="Enter your name..." /> </div></plus-popover><!-- Bottom Placement Example --><plus-popoverplacement="bottom"title="Address Info"description="Please enter your address."> <plus-button>Bottom Popover</plus-button> <divslot="content"> <plus-inputlabel="Address"placeholder="Enter your address..." /> </div></plus-popover><!-- Left Placement Example --><plus-popoverplacement="left"title="Security Question"description="What is your favorite color?"> <plus-button>Left Popover</plus-button> <divslot="content"> <plus-inputlabel="Answer"placeholder="Enter your answer..." /> </div></plus-popover>
Popover Features
Layout & Spacing
The Popover Component is designed with optimal layout and spacing to ensure readability and usability. Adequate padding around the content area, along with strategic positioning of the popover, guarantees that information is presented clearly without obstructing underlying content.
Light & Dark Mode
Designed to adapt seamlessly to both light and dark modes, the Popover Component automatically adjusts its color scheme to match the user's preference or the system setting, ensuring consistency across various environments.
Accessibility
Accessibility features include keyboard navigation, focus management, and ARIA attributes to ensure that the popover is usable and accessible to all users, including those relying on assistive technologies.
Design System
API
Size
Orientation
Criteria
Description
Status
Property
Description
Type
Accepted Values
Default
Small
Right - Middle
Medium
Right - Up
Large
Right - Down
Left - Middle
Left - Up
Left - Down
Top - Left
Top - Right
Top - Middle
Bottom - Middle
Bottom - Left
Bottom - Right
ARIA Role
Ensures role attribute has an appropriate value for the element
✔️ Passed
ARIA Hidden Elements
Ensures aria-hidden elements are not focusable nor contain focusable elements
✔️ Passed
ID Attributes
Ensures every id attribute value is unique
✔️ Passed
Color Contrast
Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds