Popover <l-popover>

Popovers are used to display rich interactive content in a floating panel anchored to a trigger element. Commonly used for mini forms, additional details, and contextual controls. Dismissed by clicking outside.

HTML tag<l-popover>

⏣Native HTML

⬡Progressive

◇Custom

⬢Shadow DOM

Custom Element · Shadow DOM

Options

Basic

Reference a trigger element by ID using the for attribute. Clicks toggle the popover; clicking outside closes it.

Jane Cooper

Senior Engineer at Acme Corp

Code

HTML

<button
  id="popover-basic"
  class="l-button"
>
  View profile
</button>
<l-popover for="popover-basic">
  <div class="flex items-center gap-3">
    <l-avatar
      src="https://i.pravatar.cc/150?img=58"
      name="Jane Cooper"
    ></l-avatar>
    <div class="flex flex-col gap-0.5">
      <p class="font-medium text-primary">Jane Cooper</p>
      <p class="text-xs text-secondary">Senior Engineer at Acme Corp</p>
    </div>
    <button
      class="l-button ml-auto"
      data-size="sm"
      data-variant="primary"
    >
      Follow
    </button>
  </div>
</l-popover>

Placement

Set placement to control position: bottom (default), top, left, right.

Placed on top Placed on bottom Placed on left Placed on right

Code

HTML

<div class="flex flex-wrap items-center gap-4">
  <button
    id="popover-top"
    class="l-button"
  >
    Top
  </button>
  <l-popover
    for="popover-top"
    placement="top"
    >Placed on top</l-popover
  >

  <button
    id="popover-bottom"
    class="l-button"
  >
    Bottom
  </button>
  <l-popover
    for="popover-bottom"
    placement="bottom"
    >Placed on bottom</l-popover
  >

  <button
    id="popover-left"
    class="l-button"
  >
    Left
  </button>
  <l-popover
    for="popover-left"
    placement="left"
    >Placed on left</l-popover
  >

  <button
    id="popover-right"
    class="l-button"
  >
    Right
  </button>
  <l-popover
    for="popover-right"
    placement="right"
    >Placed on right</l-popover
  >
</div>

Without arrow

Add without-arrow to hide the directional arrow.

This popover has no arrow.

Code

HTML

<button
  id="popover-no-arrow"
  class="l-button"
>
  Without arrow
</button>
<l-popover
  for="popover-no-arrow"
  without-arrow
>
  <p>This popover has no arrow.</p>
</l-popover>

Hover trigger

Set trigger="hover" to open on pointer enter. A safe polygon hover bridge prevents flickering when moving between trigger and popover.

Quick preview

Move your cursor freely between trigger and popover.

Code

HTML

<button
  id="popover-hover"
  class="l-button"
>
  Hover me
</button>
<l-popover
  for="popover-hover"
  trigger="hover"
>
  <div class="flex flex-col gap-2 p-1">
    <p class="font-medium">Quick preview</p>
    <p class="text-sm text-gray-500">Move your cursor freely between trigger and popover.</p>
  </div>
</l-popover>

Examples

Safe triangle visualization

Hover the button and move your cursor toward the popover. The safe polygon keeps the popover open while your cursor travels across the gap.

Safe area demo

The red polygon keeps the popover open while your cursor travels between trigger and content.

Mega menu

Hover-triggered popovers with rich content for navigation menus.

Analytics

Understand your traffic and usage patterns.

Automation

Streamline repetitive tasks and workflows.

Integrations

Connect with the tools you already use.

Security

Enterprise-grade protection built in.

Documentation

Guides, tutorials and API references.

Blog

Latest news and product updates.

Community

Join the conversation and get help.

Changelog

Track every release and improvement.

Code

HTML

<nav class="flex items-center gap-2">
  <button
    id="mega-products"
    class="l-button"
  >
    Products
  </button>
  <button
    id="mega-resources"
    class="l-button"
  >
    Resources
  </button>
</nav>

<l-popover
  for="mega-products"
  trigger="hover"
  placement="bottom-start"
  without-arrow
  style="--max-width: none; --show-duration: 0ms; --hide-duration: 0ms"
>
  <div
    class="grid grid-cols-2 gap-4 p-2"
    style="width: 420px"
  >
    <div>
      <p class="font-medium mb-1">Analytics</p>
      <p class="text-sm text-gray-500">Understand your traffic and usage patterns.</p>
    </div>
    <div>
      <p class="font-medium mb-1">Automation</p>
      <p class="text-sm text-gray-500">Streamline repetitive tasks and workflows.</p>
    </div>
    <div>
      <p class="font-medium mb-1">Integrations</p>
      <p class="text-sm text-gray-500">Connect with the tools you already use.</p>
    </div>
    <div>
      <p class="font-medium mb-1">Security</p>
      <p class="text-sm text-gray-500">Enterprise-grade protection built in.</p>
    </div>
  </div>
</l-popover>

<l-popover
  for="mega-resources"
  trigger="hover"
  placement="bottom-start"
  without-arrow
  style="--max-width: none; --show-duration: 0ms; --hide-duration: 0ms"
>
  <div
    class="grid grid-cols-2 gap-4 p-2"
    style="width: 420px"
  >
    <div>
      <p class="font-medium mb-1">Documentation</p>
      <p class="text-sm text-gray-500">Guides, tutorials and API references.</p>
    </div>
    <div>
      <p class="font-medium mb-1">Blog</p>
      <p class="text-sm text-gray-500">Latest news and product updates.</p>
    </div>
    <div>
      <p class="font-medium mb-1">Community</p>
      <p class="text-sm text-gray-500">Join the conversation and get help.</p>
    </div>
    <div>
      <p class="font-medium mb-1">Changelog</p>
      <p class="text-sm text-gray-500">Track every release and improvement.</p>
    </div>
  </div>
</l-popover>

Accessibility

Criteria

Expanded state

Trigger receives aria-expanded and aria-controls pointing to the popover

WCAG4.1.2

RGAA7.1

Dismissible

Closes on Escape and click outside (light-dismiss via popover="auto")

WCAG3.2.2

Hover bridge

Safe polygon prevents flickering when moving cursor from trigger to popover

WCAG1.4.13

Focus state

Visible focus ring on trigger for keyboard users

WCAG2.4.7

RGAA10.7

Motion

Respects prefers-reduced-motion

WCAG2.3.3

Keyboard interactions

Enter

Toggles the popover (click trigger)

Space

Toggles the popover (click trigger)

Escape

Closes the popover

Tab

Moves focus through focusable elements inside the popover, then out

API reference

Importing

JS

import 'luxen-ui/popover';

Attributes & Properties

forAttribute

ID of the trigger element

placementAttribute

Preferred placement: bottom (default), bottom-start, bottom-end, top, top-start, top-end, left, left-start, left-end, right, right-start, right-end

distanceAttribute

Offset from trigger in px. Default 8

openAttribute

Whether popover is visible. Reflects to attribute

without-arrowAttribute

Hide the directional arrow

triggerAttribute

Space-separated trigger modes: click (default), hover, focus, manual

Methods

show()Method

Shows the popover

hide()Method

Hides the popover

toggle()Method

Toggles the popover

CSS custom properties

--backgroundName

Background color. Default: Canvas

--colorName

Text color. Default: inherited

--radiusName

Border radius. Default 8px

--max-widthName

Maximum width. Default 320px

--shadowName

Box shadow

--arrow-sizeName

Arrow size. Default 8px

--show-durationName

Show animation duration. Default 150ms

--hide-durationName

Hide animation duration. Default 150ms