Popover

Displays informative content in a floating panel near a target element.

First release: 1.0.0 Latest update: July 1, 2025 Current version: 1.0.0

React

Angular

Vue

Svelte

HTML

Import

import { PlusPopover } from '@plusui/react';

import { PlusPopoverComponent } from '@plusui/angular';

import { PlusPopover } from '@plusui/vue';

import PlusPopover from '@plusui/svelte';

<script src="https://cdn.jsdelivr.net/npm/@plusui/core"></script>

Package

@plusui/react

@plusui/angular

@plusui/vue

@plusui/svelte

@plusui/core

Usage

<PlusPopover />

<plus-popover />

<plus-popover />

<PlusPopover />

<plus-popover />

Docs

Changelog

Popover Changelog

Recent changes and updates for the popover component

v1.0.0

June 20, 2025

Feat

Added Popover component for rich content

Rich content support with slots
Multiple positioning options
Custom triggers (click, hover)
Accessibility support

The Popover component is used to display additional information, options, or actions in a floating panel that appears near a trigger element. It’s useful for tooltips with rich content, dropdown menus, or contextual information displays.

Anatomy

Usage

Basic Example

A basic popover triggered by clicking a button, displaying simple text content.

Show Popover

Show code

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

export default () => {
  return (
    <>
      <PlusPopover headerText="Information" text="This is the popover content.">
        <PlusButton>
          Show Popover
        </PlusButton>
      </PlusPopover>
    </>
  );
};

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-popover header-text="Information" text="This is the popover content.">
      <plus-button>
        Show Popover
      </plus-button>
    </plus-popover>
  `
})
export class ExampleComponent {}

<template>
  <plus-popover header-text="Information" text="This is the popover content.">
    <plus-button>
      Show Popover
    </plus-button>
  </plus-popover>
</template>

<plus-popover header-text="Information" text="This is the popover content.">
  <plus-button>
    Show Popover
  </plus-button>
</plus-popover>

<plus-popover header-text="Information" text="This is the popover content.">
  <plus-button>
    Show Popover
  </plus-button>
</plus-popover>

Orientation

Use the orientation prop to control where the popover appears relative to the trigger element.

Top Start

Top

Top End

Left Start

Left

Left End

Right Start

Right

Right End

Bottom Start

Bottom

Bottom End

Show code

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

export default () => {
  return (
    <>
      <div>
        <PlusPopover orientation="top-start" headerText="Top Start">
          <PlusButton>
            Top Start
          </PlusButton>
        </PlusPopover>
        <PlusPopover orientation="top" headerText="Top">
          <PlusButton>
            Top
          </PlusButton>
        </PlusPopover>
        <PlusPopover orientation="top-end" headerText="Top End">
          <PlusButton>
            Top End
          </PlusButton>
        </PlusPopover>
      </div>
      <div className="flex gap-2">
        <div className="flex flex-col gap-2">
          <PlusPopover orientation="left-start" headerText="Left Start">
            <PlusButton>
              Left Start
            </PlusButton>
          </PlusPopover>
          <PlusPopover orientation="left" headerText="Left">
            <PlusButton>
              Left
            </PlusButton>
          </PlusPopover>
          <PlusPopover orientation="left-end" headerText="Left End">
            <PlusButton>
              Left End
            </PlusButton>
          </PlusPopover>
        </div>
        <div className="w-34">
        </div>
        <div className="flex flex-col gap-2 items-end">
          <PlusPopover orientation="right-start" headerText="Right Start">
            <PlusButton>
              Right Start
            </PlusButton>
          </PlusPopover>
          <PlusPopover orientation="right" headerText="Right">
            <PlusButton>
              Right
            </PlusButton>
          </PlusPopover>
          <PlusPopover orientation="right-end" headerText="Right End">
            <PlusButton>
              Right End
            </PlusButton>
          </PlusPopover>
        </div>
      </div>
      <div>
        <PlusPopover orientation="bottom-start" headerText="Bottom Start">
          <PlusButton>
            Bottom Start
          </PlusButton>
        </PlusPopover>
        <PlusPopover orientation="bottom" headerText="Bottom">
          <PlusButton>
            Bottom
          </PlusButton>
        </PlusPopover>
        <PlusPopover orientation="bottom-end" headerText="Bottom End">
          <PlusButton>
            Bottom End
          </PlusButton>
        </PlusPopover>
      </div>
    </>
  );
};

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <div>
      <plus-popover orientation="top-start" header-text="Top Start">
        <plus-button>
          Top Start
        </plus-button>
      </plus-popover>
      <plus-popover orientation="top" header-text="Top">
        <plus-button>
          Top
        </plus-button>
      </plus-popover>
      <plus-popover orientation="top-end" header-text="Top End">
        <plus-button>
          Top End
        </plus-button>
      </plus-popover>
    </div>
    <div class="flex gap-2">
      <div class="flex flex-col gap-2">
        <plus-popover orientation="left-start" header-text="Left Start">
          <plus-button>
            Left Start
          </plus-button>
        </plus-popover>
        <plus-popover orientation="left" header-text="Left">
          <plus-button>
            Left
          </plus-button>
        </plus-popover>
        <plus-popover orientation="left-end" header-text="Left End">
          <plus-button>
            Left End
          </plus-button>
        </plus-popover>
      </div>
      <div class="w-34">
      </div>
      <div class="flex flex-col gap-2 items-end">
        <plus-popover orientation="right-start" header-text="Right Start">
          <plus-button>
            Right Start
          </plus-button>
        </plus-popover>
        <plus-popover orientation="right" header-text="Right">
          <plus-button>
            Right
          </plus-button>
        </plus-popover>
        <plus-popover orientation="right-end" header-text="Right End">
          <plus-button>
            Right End
          </plus-button>
        </plus-popover>
      </div>
    </div>
    <div>
      <plus-popover orientation="bottom-start" header-text="Bottom Start">
        <plus-button>
          Bottom Start
        </plus-button>
      </plus-popover>
      <plus-popover orientation="bottom" header-text="Bottom">
        <plus-button>
          Bottom
        </plus-button>
      </plus-popover>
      <plus-popover orientation="bottom-end" header-text="Bottom End">
        <plus-button>
          Bottom End
        </plus-button>
      </plus-popover>
    </div>
  `
})
export class ExampleComponent {}

<template>
  <div>
    <plus-popover orientation="top-start" header-text="Top Start">
      <plus-button>
        Top Start
      </plus-button>
    </plus-popover>
    <plus-popover orientation="top" header-text="Top">
      <plus-button>
        Top
      </plus-button>
    </plus-popover>
    <plus-popover orientation="top-end" header-text="Top End">
      <plus-button>
        Top End
      </plus-button>
    </plus-popover>
  </div>
  <div class="flex gap-2">
    <div class="flex flex-col gap-2">
      <plus-popover orientation="left-start" header-text="Left Start">
        <plus-button>
          Left Start
        </plus-button>
      </plus-popover>
      <plus-popover orientation="left" header-text="Left">
        <plus-button>
          Left
        </plus-button>
      </plus-popover>
      <plus-popover orientation="left-end" header-text="Left End">
        <plus-button>
          Left End
        </plus-button>
      </plus-popover>
    </div>
    <div class="w-34">
    </div>
    <div class="flex flex-col gap-2 items-end">
      <plus-popover orientation="right-start" header-text="Right Start">
        <plus-button>
          Right Start
        </plus-button>
      </plus-popover>
      <plus-popover orientation="right" header-text="Right">
        <plus-button>
          Right
        </plus-button>
      </plus-popover>
      <plus-popover orientation="right-end" header-text="Right End">
        <plus-button>
          Right End
        </plus-button>
      </plus-popover>
    </div>
  </div>
  <div>
    <plus-popover orientation="bottom-start" header-text="Bottom Start">
      <plus-button>
        Bottom Start
      </plus-button>
    </plus-popover>
    <plus-popover orientation="bottom" header-text="Bottom">
      <plus-button>
        Bottom
      </plus-button>
    </plus-popover>
    <plus-popover orientation="bottom-end" header-text="Bottom End">
      <plus-button>
        Bottom End
      </plus-button>
    </plus-popover>
  </div>
</template>

<div>
  <plus-popover orientation="top-start" header-text="Top Start">
    <plus-button>
      Top Start
    </plus-button>
  </plus-popover>
  <plus-popover orientation="top" header-text="Top">
    <plus-button>
      Top
    </plus-button>
  </plus-popover>
  <plus-popover orientation="top-end" header-text="Top End">
    <plus-button>
      Top End
    </plus-button>
  </plus-popover>
</div>
<div class="flex gap-2">
  <div class="flex flex-col gap-2">
    <plus-popover orientation="left-start" header-text="Left Start">
      <plus-button>
        Left Start
      </plus-button>
    </plus-popover>
    <plus-popover orientation="left" header-text="Left">
      <plus-button>
        Left
      </plus-button>
    </plus-popover>
    <plus-popover orientation="left-end" header-text="Left End">
      <plus-button>
        Left End
      </plus-button>
    </plus-popover>
  </div>
  <div class="w-34">
  </div>
  <div class="flex flex-col gap-2 items-end">
    <plus-popover orientation="right-start" header-text="Right Start">
      <plus-button>
        Right Start
      </plus-button>
    </plus-popover>
    <plus-popover orientation="right" header-text="Right">
      <plus-button>
        Right
      </plus-button>
    </plus-popover>
    <plus-popover orientation="right-end" header-text="Right End">
      <plus-button>
        Right End
      </plus-button>
    </plus-popover>
  </div>
</div>
<div>
  <plus-popover orientation="bottom-start" header-text="Bottom Start">
    <plus-button>
      Bottom Start
    </plus-button>
  </plus-popover>
  <plus-popover orientation="bottom" header-text="Bottom">
    <plus-button>
      Bottom
    </plus-button>
  </plus-popover>
  <plus-popover orientation="bottom-end" header-text="Bottom End">
    <plus-button>
      Bottom End
    </plus-button>
  </plus-popover>
</div>

<div>
  <plus-popover orientation="top-start" header-text="Top Start">
    <plus-button>
      Top Start
    </plus-button>
  </plus-popover>
  <plus-popover orientation="top" header-text="Top">
    <plus-button>
      Top
    </plus-button>
  </plus-popover>
  <plus-popover orientation="top-end" header-text="Top End">
    <plus-button>
      Top End
    </plus-button>
  </plus-popover>
</div>
<div class="flex gap-2">
  <div class="flex flex-col gap-2">
    <plus-popover orientation="left-start" header-text="Left Start">
      <plus-button>
        Left Start
      </plus-button>
    </plus-popover>
    <plus-popover orientation="left" header-text="Left">
      <plus-button>
        Left
      </plus-button>
    </plus-popover>
    <plus-popover orientation="left-end" header-text="Left End">
      <plus-button>
        Left End
      </plus-button>
    </plus-popover>
  </div>
  <div class="w-34">
  </div>
  <div class="flex flex-col gap-2 items-end">
    <plus-popover orientation="right-start" header-text="Right Start">
      <plus-button>
        Right Start
      </plus-button>
    </plus-popover>
    <plus-popover orientation="right" header-text="Right">
      <plus-button>
        Right
      </plus-button>
    </plus-popover>
    <plus-popover orientation="right-end" header-text="Right End">
      <plus-button>
        Right End
      </plus-button>
    </plus-popover>
  </div>
</div>
<div>
  <plus-popover orientation="bottom-start" header-text="Bottom Start">
    <plus-button>
      Bottom Start
    </plus-button>
  </plus-popover>
  <plus-popover orientation="bottom" header-text="Bottom">
    <plus-button>
      Bottom
    </plus-button>
  </plus-popover>
  <plus-popover orientation="bottom-end" header-text="Bottom End">
    <plus-button>
      Bottom End
    </plus-button>
  </plus-popover>
</div>

Trigger

The trigger prop determines how the popover is opened.

Click Trigger (Default)

Hover Trigger

Show code

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

export default () => {
  return (
    <>
      <PlusPopover trigger="click" headerText="Click Me">
        <PlusButton>
          Click Trigger (Default)
        </PlusButton>
      </PlusPopover>
      <PlusPopover trigger="hover" headerText="Hover Over Me">
        <PlusButton>
          Hover Trigger
        </PlusButton>
      </PlusPopover>
    </>
  );
};

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-popover trigger="click" header-text="Click Me">
      <plus-button>
        Click Trigger (Default)
      </plus-button>
    </plus-popover>
    <plus-popover trigger="hover" header-text="Hover Over Me">
      <plus-button>
        Hover Trigger
      </plus-button>
    </plus-popover>
  `
})
export class ExampleComponent {}

<template>
  <plus-popover trigger="click" header-text="Click Me">
    <plus-button>
      Click Trigger (Default)
    </plus-button>
  </plus-popover>
  <plus-popover trigger="hover" header-text="Hover Over Me">
    <plus-button>
      Hover Trigger
    </plus-button>
  </plus-popover>
</template>

<plus-popover trigger="click" header-text="Click Me">
  <plus-button>
    Click Trigger (Default)
  </plus-button>
</plus-popover>
<plus-popover trigger="hover" header-text="Hover Over Me">
  <plus-button>
    Hover Trigger
  </plus-button>
</plus-popover>

<plus-popover trigger="click" header-text="Click Me">
  <plus-button>
    Click Trigger (Default)
  </plus-button>
</plus-popover>
<plus-popover trigger="hover" header-text="Hover Over Me">
  <plus-button>
    Hover Trigger
  </plus-button>
</plus-popover>

Status

Use the status prop to apply different color schemes and default icons.

Default

Primary

Success

Warning

Danger

Info

Show code

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

export default () => {
  return (
    <>
      <PlusPopover status="default" headerText="Default">
        <PlusButton>
          Default
        </PlusButton>
      </PlusPopover>
      <PlusPopover status="primary" headerText="Primary">
        <PlusButton status="primary">
          Primary
        </PlusButton>
      </PlusPopover>
      <PlusPopover status="success" headerText="Success">
        <PlusButton status="success">
          Success
        </PlusButton>
      </PlusPopover>
      <PlusPopover status="warning" headerText="Warning">
        <PlusButton status="warning">
          Warning
        </PlusButton>
      </PlusPopover>
      <PlusPopover status="danger" headerText="Danger">
        <PlusButton status="danger">
          Danger
        </PlusButton>
      </PlusPopover>
      <PlusPopover status="info" headerText="Info">
        <PlusButton status="info">
          Info
        </PlusButton>
      </PlusPopover>
    </>
  );
};

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-popover status="default" header-text="Default">
      <plus-button>
        Default
      </plus-button>
    </plus-popover>
    <plus-popover status="primary" header-text="Primary">
      <plus-button status="primary">
        Primary
      </plus-button>
    </plus-popover>
    <plus-popover status="success" header-text="Success">
      <plus-button status="success">
        Success
      </plus-button>
    </plus-popover>
    <plus-popover status="warning" header-text="Warning">
      <plus-button status="warning">
        Warning
      </plus-button>
    </plus-popover>
    <plus-popover status="danger" header-text="Danger">
      <plus-button status="danger">
        Danger
      </plus-button>
    </plus-popover>
    <plus-popover status="info" header-text="Info">
      <plus-button status="info">
        Info
      </plus-button>
    </plus-popover>
  `
})
export class ExampleComponent {}

<template>
  <plus-popover status="default" header-text="Default">
    <plus-button>
      Default
    </plus-button>
  </plus-popover>
  <plus-popover status="primary" header-text="Primary">
    <plus-button status="primary">
      Primary
    </plus-button>
  </plus-popover>
  <plus-popover status="success" header-text="Success">
    <plus-button status="success">
      Success
    </plus-button>
  </plus-popover>
  <plus-popover status="warning" header-text="Warning">
    <plus-button status="warning">
      Warning
    </plus-button>
  </plus-popover>
  <plus-popover status="danger" header-text="Danger">
    <plus-button status="danger">
      Danger
    </plus-button>
  </plus-popover>
  <plus-popover status="info" header-text="Info">
    <plus-button status="info">
      Info
    </plus-button>
  </plus-popover>
</template>

<plus-popover status="default" header-text="Default">
  <plus-button>
    Default
  </plus-button>
</plus-popover>
<plus-popover status="primary" header-text="Primary">
  <plus-button status="primary">
    Primary
  </plus-button>
</plus-popover>
<plus-popover status="success" header-text="Success">
  <plus-button status="success">
    Success
  </plus-button>
</plus-popover>
<plus-popover status="warning" header-text="Warning">
  <plus-button status="warning">
    Warning
  </plus-button>
</plus-popover>
<plus-popover status="danger" header-text="Danger">
  <plus-button status="danger">
    Danger
  </plus-button>
</plus-popover>
<plus-popover status="info" header-text="Info">
  <plus-button status="info">
    Info
  </plus-button>
</plus-popover>

<plus-popover status="default" header-text="Default">
  <plus-button>
    Default
  </plus-button>
</plus-popover>
<plus-popover status="primary" header-text="Primary">
  <plus-button status="primary">
    Primary
  </plus-button>
</plus-popover>
<plus-popover status="success" header-text="Success">
  <plus-button status="success">
    Success
  </plus-button>
</plus-popover>
<plus-popover status="warning" header-text="Warning">
  <plus-button status="warning">
    Warning
  </plus-button>
</plus-popover>
<plus-popover status="danger" header-text="Danger">
  <plus-button status="danger">
    Danger
  </plus-button>
</plus-popover>
<plus-popover status="info" header-text="Info">
  <plus-button status="info">
    Info
  </plus-button>
</plus-popover>

Custom Content and Title

Use slots title and content for more complex content instead of the header-text and text props.

Custom Title Slot

This is custom popover content with HTML placed in the content slot.

Action

Show Custom Popover

Show code

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

export default () => {
  return (
    <>
      <PlusPopover>
        <div slot="title" className="flex items-center gap-2">
          <i className="fa-solid fa-star" style="color: gold;">
          </i>
          <span>
            Custom Title Slot
          </span>
        </div>
        <div slot="content">
          <p>
            This is
            <strong>
              custom popover
            </strong>
            content with
            <em>
              HTML
            </em>
            placed in the content slot.
          </p>
          <PlusDivider className="my-2">
          </PlusDivider>
          <PlusButton size="sm">
            Action
          </PlusButton>
        </div>
        <PlusButton>
          Show Custom Popover
        </PlusButton>
      </PlusPopover>
    </>
  );
};

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-popover>
      <div slot="title" class="flex items-center gap-2">
        <i class="fa-solid fa-star" style="color: gold;">
        </i>
        <span>
          Custom Title Slot
        </span>
      </div>
      <div slot="content">
        <p>
          This is
          <strong>
            custom popover
          </strong>
          content with
          <em>
            HTML
          </em>
          placed in the content slot.
        </p>
        <plus-divider class="my-2">
        </plus-divider>
        <plus-button size="sm">
          Action
        </plus-button>
      </div>
      <plus-button>
        Show Custom Popover
      </plus-button>
    </plus-popover>
  `
})
export class ExampleComponent {}

<template>
  <plus-popover>
    <div slot="title" class="flex items-center gap-2">
      <i class="fa-solid fa-star" style="color: gold;">
      </i>
      <span>
        Custom Title Slot
      </span>
    </div>
    <div slot="content">
      <p>
        This is
        <strong>
          custom popover
        </strong>
        content with
        <em>
          HTML
        </em>
        placed in the content slot.
      </p>
      <plus-divider class="my-2">
      </plus-divider>
      <plus-button size="sm">
        Action
      </plus-button>
    </div>
    <plus-button>
      Show Custom Popover
    </plus-button>
  </plus-popover>
</template>

<plus-popover>
  <div slot="title" class="flex items-center gap-2">
    <i class="fa-solid fa-star" style="color: gold;">
    </i>
    <span>
      Custom Title Slot
    </span>
  </div>
  <div slot="content">
    <p>
      This is
      <strong>
        custom popover
      </strong>
      content with
      <em>
        HTML
      </em>
      placed in the content slot.
    </p>
    <plus-divider class="my-2">
    </plus-divider>
    <plus-button size="sm">
      Action
    </plus-button>
  </div>
  <plus-button>
    Show Custom Popover
  </plus-button>
</plus-popover>

<plus-popover>
  <div slot="title" class="flex items-center gap-2">
    <i class="fa-solid fa-star" style="color: gold;">
    </i>
    <span>
      Custom Title Slot
    </span>
  </div>
  <div slot="content">
    <p>
      This is
      <strong>
        custom popover
      </strong>
      content with
      <em>
        HTML
      </em>
      placed in the content slot.
    </p>
    <plus-divider class="my-2">
    </plus-divider>
    <plus-button size="sm">
      Action
    </plus-button>
  </div>
  <plus-button>
    Show Custom Popover
  </plus-button>
</plus-popover>

Dismissable

Set dismissable="false" to hide the default close button.

Dismissable

Not Dismissable

Show code

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

export default () => {
  return (
    <>
      <PlusPopover headerText="Dismissable (Default)">
        <PlusButton>
          Dismissable
        </PlusButton>
      </PlusPopover>
      <PlusPopover headerText="Not Dismissable" dismissable="false">
        <PlusButton>
          Not Dismissable
        </PlusButton>
      </PlusPopover>
    </>
  );
};

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-popover header-text="Dismissable (Default)">
      <plus-button>
        Dismissable
      </plus-button>
    </plus-popover>
    <plus-popover header-text="Not Dismissable" dismissable="false">
      <plus-button>
        Not Dismissable
      </plus-button>
    </plus-popover>
  `
})
export class ExampleComponent {}

<template>
  <plus-popover header-text="Dismissable (Default)">
    <plus-button>
      Dismissable
    </plus-button>
  </plus-popover>
  <plus-popover header-text="Not Dismissable" dismissable="false">
    <plus-button>
      Not Dismissable
    </plus-button>
  </plus-popover>
</template>

<plus-popover header-text="Dismissable (Default)">
  <plus-button>
    Dismissable
  </plus-button>
</plus-popover>
<plus-popover header-text="Not Dismissable" dismissable="false">
  <plus-button>
    Not Dismissable
  </plus-button>
</plus-popover>

<plus-popover header-text="Dismissable (Default)">
  <plus-button>
    Dismissable
  </plus-button>
</plus-popover>
<plus-popover header-text="Not Dismissable" dismissable="false">
  <plus-button>
    Not Dismissable
  </plus-button>
</plus-popover>

Visual Sections

Layout & Spacing

Light & Dark Mode

Keyboard Behavior:
- When the popover is opened, focus is typically moved inside the popover panel, often to the first focusable element or the close button if available.
- Tab and Shift+Tab navigate between focusable elements within the popover. Focus is trapped within the popover when open.
- Escape closes the popover and returns focus to the trigger element.
Screen Reader:
- The component uses role="dialog", aria-labelledby (pointing to the title element), and aria-describedby (pointing to the content element).
- aria-hidden is used to hide the popover content from screen readers when it is closed.
- When opened, screen readers announce the dialog’s role, title, and description.
- The close button (if present) has an appropriate aria-label.
Required Developer Actions:
- Ensure the trigger element (in the default slot) is inherently focusable or has tabindex="0".
- Provide clear and concise text for the header-text prop or title slot.
- Provide descriptive content via the text prop or content slot.
- If using custom content in slots, ensure it is accessible.
- Use appropriate status values if they convey semantic meaning beyond presentation.

API Reference

Props

Name	Type	Default	Description	Required
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the popover panel.	No
`orientation`	`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'`	`'top'`	Position relative to the trigger element.	No
`trigger`	`'click' \| 'hover'`	`'click'`	How the popover is opened.	No
`text`	`string`	`undefined`	Main text content. Ignored if `content` slot is used.	No
`headerText`	`string`	`'Title'`	Header title text. Ignored if `title` slot is used.	No
`status`	`'success' \| 'warning' \| 'danger' \| 'info' \| 'primary' \| 'default'`	`'default'`	Color scheme and default icon based on status.	No
`dismissable`	`boolean`	`true`	Whether to show the default close button in the header.	No
`statusIcon`	`boolean`	`true`	Whether to show the default status icon in the header.	No
`showArrow`	`boolean`	`true`	Whether to display the arrow pointing to the trigger element.	No

Events

Name	Payload Type	Description
`plus-popover-open`	`CustomEvent<void>`	Fired when the popover opens.
`plus-popover-close`	`CustomEvent<void>`	Fired when the popover closes (for any reason).
`plus-popover-dismiss`	`CustomEvent<void>`	Fired specifically when closed via the close button.

Slots

Name	Description
`default` (unnamed)	The target element that triggers the popover.
`icon`	Custom icon content in the header, replaces the default status icon.
`title`

Join the Community

Plus UI is built by the community. Join us on our platforms to contribute, get help, and stay up to date.

Figma GitHub Discord Twitter Open Collective

Popover

Import

Package

Usage

Docs

Changelog

Popover Changelog

v1.0.0

Added Popover component for rich content

Anatomy

Usage

Basic Example

Orientation

Trigger

Status

Custom Content and Title

Dismissable

Visual Sections

Layout & Spacing

Light & Dark Mode

Accessibility (a11y)

API Reference

Props

Events

Slots

Join the Community