Popover
Floating content panel anchored to a trigger element, with four placement positions and automatic outside-click dismissal.
<arc-popover>Overview
Popover is a disclosure component that reveals a floating panel of arbitrary content when the user clicks a trigger element. It is the foundation for building dropdown menus, info cards, filter panels, and other contextual UI that should appear on demand without leaving the current page. The panel is positioned relative to the trigger using the position prop, which accepts top, bottom, left, or right.
The trigger element is placed in the named trigger slot, and the popover content goes in the default slot. When the popover opens, the panel scales in with a CSS transition driven by --transition-base. Clicking outside the popover or pressing Escape closes it, and the component fires arc-open and arc-close events so you can coordinate side effects like pausing scroll or loading data.
Popover uses role="dialog" on the panel and sets aria-haspopup and aria-expanded on the trigger, following WAI-ARIA patterns for disclosure widgets. The panel is absolutely positioned with z-index: 100 and uses the --shadow-overlay token for depth. CSS parts are exposed for trigger and panel to allow targeted styling without piercing the shadow DOM.
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 Dialog 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 Dialog 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
- 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';
export default function Example() {
return (
<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: `
<arc-popover>
<button slot="trigger">Show Popover</button>
<div>Popover content here.</div>
</arc-popover>
`,
})
export class MyComponent {}import { Popover } from '@arclux/arc-ui-solid';
export default function Example() {
return (
<Popover>
<button slot="trigger">Show Popover</button>
<div>Popover content here.</div>
</Popover>
);
}import { Popover } from '@arclux/arc-ui-preact';
export default function Example() {
return (
<Popover>
<button slot="trigger">Show Popover</button>
<div>Popover content here.</div>
</Popover>
);
}API
triggerstring''- Deprecated, and has no effect: it was reserved for trigger modes that were never built, and v5 removes it. For a panel that opens on hover, use
arc-hover-card. openbooleanfalse- 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.
Events
arc-open- Fired when the popover opens.
arc-close- Fired when the popover closes.
See Also
- TooltipContextual hint that appears on hover or focus, providing supplementary information without cluttering the UI. Supports four placement positions and a configurable show delay.
- Hover CardCard that appears on hover with a delay.
- Dropdown MenuMenu dropdown triggered by a button with keyboard navigation.