Getting StartedComponentsDesign TokensThemingTheme SynthesizerFrameworksAccessibilityUtilitiesServer RenderingBrowser SupportContributingChangelog App ShellAspect GridAuth ShellCenterClusterContainerDashboard GridDockFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkSpeed DialStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCalloutCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSeparatorSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridData TableDescription ListDiffEvent CalendarGaugeJSON TreeKanbanKey ValueLevel MeterListMeterSparklineStatStepperTableTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputOTP InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuGuided TourHover CardInline MessageLoading OverlayModalNotification PanelPopoverProgressProgress ToastSheetSnackbarSpotlightToastTooltip
ARC UI ARC Radiant Components
v3.2 Docs Components Tokens Synthesizer
Getting StartedFrameworksServer Rendering Design TokensThemingTheme SynthesizerTypographyUtilities All ComponentsAccessibilityBrowser SupportChangelogContributingStats App ShellAspect GridAuth ShellCenterClusterContainerDashboard GridDockFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkSpeed DialStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCalloutCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSeparatorSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridData TableDescription ListDiffEvent CalendarGaugeJSON TreeKanbanKey ValueLevel MeterListMeterSparklineStatStepperTableTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputOTP InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuGuided TourHover CardInline MessageLoading OverlayModalNotification PanelPopoverProgressProgress ToastSheetSnackbarSpotlightToastTooltip

Popover

Floating content panel anchored to a trigger element, with four placement positions and automatic outside-click dismissal.

Components Popover
feedback interactive
<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 smooth CSS transition powered 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 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';

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

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

arc-open
Fired when the popover opens.
arc-close
Fired when the popover closes.

See Also
ARC UI

Components that glow. One Lit source, seven native targets.

Docs

Project

Arclight

© 2026 Arclight Digital, LLC. All rights reserved.

Documentation generated with AI assistance and reviewed by humans. Found an issue? Open a GitHub issue.

Privacy Policy