Popover — ARC UI

Components

Popover

feedback

interactive

<arc-popover>

Overview

Guidelines

When to use

Use the `trigger` slot with a focusable element like a button for keyboard accessibility
Choose a `position` that keeps the panel visible within the viewport for your layout
Keep popover content concise -- for complex forms, consider a Modal or Drawer instead
Use `arc-close` events to clean up temporary state when the popover dismisses
Nest interactive content like links, buttons, or small forms inside the default slot

When not to use

Do not use Popover for critical information that the user must see -- it can be dismissed accidentally
Do not nest a Popover inside another Popover -- stacking z-index and focus management becomes unreliable
Do not place very large content (tables, long lists) inside a popover -- use a Drawer or Modal for that
Do not use Popover as a tooltip -- use the Tooltip component for brief hover-triggered hints
Avoid placing the trigger inside a scrollable container without testing that the panel remains aligned

Features

Four placement positions: top, bottom (default), left, and right, each with centered alignment
Smooth open/close animation using CSS scale and opacity transitions
Automatic outside-click dismissal -- clicking anywhere outside the popover closes it
Escape key closes the popover for keyboard-accessible dismissal
Named `trigger` slot for the clickable element and default slot for popover content
Fires `arc-open` and `arc-close` events for coordinating external state
Accessible `aria-haspopup`, `aria-expanded`, and `role="dialog"` attributes
CSS parts `trigger` and `panel` for external style customisation

Preview

Popover Title

This is popover content. Click outside or press Escape to close.

Usage

This component requires JavaScript. No pure HTML/CSS version is available — use the Web Component directly or a framework wrapper.

<arc-popover>
  <button slot="trigger">Show Popover</button>
  <div>Popover content here.</div>
</arc-popover>

import { Popover } from '@arclux/arc-ui-react';

<Popover>
  <button slot="trigger">Show Popover</button>
  <div>Popover content here.</div>
</Popover>

<script setup>
import { Popover } from '@arclux/arc-ui-vue';
</script>

<template>
  <Popover>
    <button slot="trigger">Show Popover</button>
    <div>Popover content here.</div>
  </Popover>
</template>

<script>
  import { Popover } from '@arclux/arc-ui-svelte';
</script>

<Popover>
  <button slot="trigger">Show Popover</button>
  <div>Popover content here.</div>
</Popover>

import { Component } from '@angular/core';
import { Popover } from '@arclux/arc-ui-angular';

@Component({
  imports: [Popover],
  template: `
    <Popover>
      <button slot="trigger">Show Popover</button>
      <div>Popover content here.</div>
    </Popover>
  `,
})
export class MyComponent {}

import { Popover } from '@arclux/arc-ui-solid';

<Popover>
  <button slot="trigger">Show Popover</button>
  <div>Popover content here.</div>
</Popover>

import { Popover } from '@arclux/arc-ui-preact';

<Popover>
  <button slot="trigger">Show Popover</button>
  <div>Popover content here.</div>
</Popover>

API

Prop	Type	Default	Description
`open`	`boolean`	`false`	Whether the popover panel is currently visible. Reflected as an attribute.
`position`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'bottom'`	Placement of the panel relative to the trigger element.
`trigger`	`string`	`''`	Reserved for future trigger-mode configuration (click, hover, manual).

Events

Event	Description
`arc-open`	Fired when the popover opens.
`arc-close`	Fired when the popover closes.