Plus UI
Plus UI ↗️Be Our Sponsor ↗️
  • Getting Started
    • Documentation Overview
    • Component List & Plans
    • Support
    • Contributing
    • FAQs
  • UI Library
    • Overview
    • Changelog
    • Installation
      • React
      • Vue
      • Angular
      • Svelte
  • Design System
    • Overview
    • Setting up on Figma
    • Styles & Variables
  • Components
    • Overview
    • Accordion
    • Alert
    • Avatar
    • Badge
    • Button
    • Button Group
    • Breadcrumb
    • Checkbox
    • Chip
    • Divider
    • Drawer
    • Dropdown
    • Input
    • Link
    • Modal
    • Popconfirm
    • Popover
    • Progress
    • Radio
    • Rating
    • Select
    • Tab
    • Textarea
    • Toast
    • Toggle
    • Tooltip
  • Foundation
    • Overview
    • Color
      • Color Palette
      • Color Variables
      • Color Token List
    • Typography
    • Icons
    • Border
    • Spacing
    • Opacity
    • Shadows & Effects
    • Breakpoints
  • Customization
    • Customization
    • Theme
    • Accessibility
    • Tokens
Powered by GitBook
On this page
  • Anatomy
  • Properties
  • Size
  • Orientation
  • Popover Features
  • Layout & Spacing
  • Light & Dark Mode
  • Accessibility
  • Design System
  • API

Was this helpful?

  1. Components

Popover

Empower Your Interface with Sleek Popovers

PreviousPopconfirmNextProgress

Last updated 11 months ago

Was this helpful?

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
Orientation

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

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.

import React from 'react';
import { PlusPopover, PlusButton, PlusInput } from '@plusui/react';

const PopoverWithSizes = () => (
  <>
    {/* Small Popover */}
    <PlusPopover size="sm" title="Small Popover">
      <PlusButton kind="outlined" size="sm">Small</PlusButton>
      <div slot="content">
        <PlusInput label="Label" placeholder="Enter something..." size="sm" />
      </div>
    </PlusPopover>

    {/* Medium Popover */}
    <PlusPopover size="md" title="Medium Popover">
      <PlusButton kind="outlined" size="md">Medium</PlusButton>
      <div slot="content">
        <PlusInput label="Label" placeholder="Enter something..." size="md" />
      </div>
    </PlusPopover>

    {/* Large Popover */}
    <PlusPopover size="lg" title="Large Popover">
      <PlusButton kind="outlined" size="lg">Large</PlusButton>
      <div slot="content">
        <PlusInput label="Label" placeholder="Enter something..." size="lg" />
      </div>
    </PlusPopover>
  </>
);

export default PopoverWithSizes;
<!-- Small Popover -->
<plus-popover size="sm" title="Small Popover">
  <plus-button kind="outlined" size="sm">Small</plus-button>
  <div slot="content">
    <plus-input label="Label" placeholder="Enter something..." size="sm"></plus-input>
  </div>
</plus-popover>

<!-- Medium Popover -->
<plus-popover size="md" title="Medium Popover">
  <plus-button kind="outlined" size="md">Medium</plus-button>
  <div slot="content">
    <plus-input label="Label" placeholder="Enter something..." size="md"></plus-input>
  </div>
</plus-popover>

<!-- Large Popover -->
<plus-popover size="lg" title="Large Popover">
  <plus-button kind="outlined" size="lg">Large</plus-button>
  <div slot="content">
    <plus-input label="Label" placeholder="Enter something..." size="lg"></plus-input>
  </div>
</plus-popover>
<template>
  <!-- Small Popover -->
  <plus-popover size="sm" title="Small Popover">
    <plus-button kind="outlined" size="sm">Small</plus-button>
    <div slot="content">
      <plus-input label="Label" placeholder="Enter something..." size="sm" />
    </div>
  </plus-popover>

  <!-- Medium Popover -->
  <plus-popover size="md" title="Medium Popover">
    <plus-button kind="outlined" size="md">Medium</plus-button>
    <div slot="content">
      <plus-input label="Label" placeholder="Enter something..." size="md" />
    </div>
  </plus-popover>

  <!-- Large Popover -->
  <plus-popover size="lg" title="Large Popover">
    <plus-button kind="outlined" size="lg">Large</plus-button>
    <div slot="content">
      <plus-input label="Label" placeholder="Enter something..." size="lg" />
    </div>
  </plus-popover>
</template>
<!-- Small Popover -->
<plus-popover size="sm" title="Small Popover">
  <plus-button kind="outlined" size="sm">Small</plus-button>
  <div slot="content">
    <plus-input label="Label" placeholder="Enter something..." size="sm"></plus-input>
  </div>
</plus-popover>

<!-- Medium Popover -->
<plus-popover size="md" title="Medium Popover">
  <plus-button kind="outlined" size="md">Medium</plus-button>
  <div slot="content">
    <plus-input label="Label" placeholder="Enter something..." size="md"></plus-input>
  </div>
</plus-popover>

<!-- Large Popover -->
<plus-popover size="lg" title="Large Popover">
  <plus-button kind="outlined" size="lg">Large</plus-button>
  <div slot="content">
    <plus-input label="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 Example
const PopoverTop = () => (
  <PlusPopover placement="top" title="User Info" description="Please enter your name.">
    <PlusButton>Top Popover</PlusButton>
    <div slot="content">
      <PlusInput label="Name" placeholder="Enter your name..." />
    </div>
  </PlusPopover>
);

// Bottom Placement Example
const PopoverBottom = () => (
  <PlusPopover placement="bottom" title="Address Info" description="Please enter your address.">
    <PlusButton>Bottom Popover</PlusButton>
    <div slot="content">
      <PlusInput label="Address" placeholder="Enter your address..." />
    </div>
  </PlusPopover>
);

// Left Placement Example
const PopoverLeft = () => (
  <PlusPopover placement="left" title="Security Question" description="What is your favorite color?">
    <PlusButton>Left Popover</PlusButton>
    <div slot="content">
      <PlusInput label="Answer" placeholder="Enter your answer..." />
    </div>
  </PlusPopover>
);

export default {
  PopoverTop,
  PopoverBottom,
  PopoverLeft,
};
<!-- Top Placement Example -->
<plus-popover placement="top" title="User Info" description="Please enter your name.">
  <plus-button>Top Popover</plus-button>
  <div slot="content">
    <plus-input label="Name" placeholder="Enter your name..." />
  </div>
</plus-popover>

<!-- Bottom Placement Example -->
<plus-popover placement="bottom" title="Address Info" description="Please enter your address.">
  <plus-button>Bottom Popover</plus-button>
  <div slot="content">
    <plus-input label="Address" placeholder="Enter your address..." />
  </div>
</plus-popover>

<!-- Left Placement Example -->
<plus-popover placement="left" title="Security Question" description="What is your favorite color?">
  <plus-button>Left Popover</plus-button>
  <div slot="content">
    <plus-input label="Answer" placeholder="Enter your answer..." />
  </div>
</plus-popover>
<template>
  <!-- Top Placement Example -->
  <plus-popover placement="top" title="User Info" description="Please enter your name.">
    <plus-button>Top Popover</plus-button>
    <div slot="content">
      <plus-input label="Name" placeholder="Enter your name..." />
    </div>
  </plus-popover>

  <!-- Bottom Placement Example -->
  <plus-popover placement="bottom" title="Address Info" description="Please enter your address.">
    <plus-button>Bottom Popover</plus-button>
    <div slot="content">
      <plus-input label="Address" placeholder="Enter your address..." />
    </div>
  </plus-popover>

  <!-- Left Placement Example -->
  <plus-popover placement="left" title="Security Question" description="What is your favorite color?">
    <plus-button>Left Popover</plus-button>
    <div slot="content">
      <plus-input label="Answer" placeholder="Enter your answer..." />
    </div>
  </plus-popover>
</template>
<!-- Top Placement Example -->
<plus-popover placement="top" title="User Info" description="Please enter your name.">
  <plus-button>Top Popover</plus-button>
  <div slot="content">
    <plus-input label="Name" placeholder="Enter your name..." />
  </div>
</plus-popover>

<!-- Bottom Placement Example -->
<plus-popover placement="bottom" title="Address Info" description="Please enter your address.">
  <plus-button>Bottom Popover</plus-button>
  <div slot="content">
    <plus-input label="Address" placeholder="Enter your address..." />
  </div>
</plus-popover>

<!-- Left Placement Example -->
<plus-popover placement="left" title="Security Question" description="What is your favorite color?">
  <plus-button>Left Popover</plus-button>
  <div slot="content">
    <plus-input label="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.

Criteria
Description
Status

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

✔️ AA ~ AAA

Design System

API

Property
Description
Type
Accepted Values
Default

size

Sets the size of the popover

String

sm, md, lg

md

placement

Determines the position of the popover

String

top, top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-start, right-end

top

showArrow

Shows or hides the arrow

Boolean

true, false

true

title

The title of the popover

String

Any valid string

null

okText

Text for the confirmation button

String

Any valid string

Confirm

cancelText

Text for the cancellation button

String

Any valid string

Cancel

trigger

Defines how the popover is triggered

String

click, manual

click

prefixIcon

Custom icon for the popover

String

Any valid icon class

Depends on status

Plus UI Design System | Figma CommunityFigma
Plus UI Design System on Figma
Logo
anatomy of popover
layout & spacing of popover component
light & dark mode of popover component