# @aurodesignsystem/auro-popover

> auro-popover HTML custom element

Latest version **6.1.0** (published 2026-09-22) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @aurodesignsystem/auro-popover
pnpm add @aurodesignsystem/auro-popover
yarn add @aurodesignsystem/auro-popover
bun add @aurodesignsystem/auro-popover
```

## Health

**Score 75/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 6.1.0 |
| Published | 2026-09-22 |
| First published | 2024-01-19 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=20 |
| Dependencies | 1 |
| Unpacked size | 385.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 0 |
| Maintainers | capsule42, dale.sande, blackfalcon, braven112, jordanjones243, alaskaairlinesits-admin, dougalaska, rmenner-aa |
| Keywords | alaska airlines, auro, design system, web components |

## Links

- npm: https://www.npmjs.com/package/@aurodesignsystem/auro-popover
- Repository: https://github.com/AlaskaAirlines/auro-popover
- Homepage: https://github.com/AlaskaAirlines/auro-popover#readme
- Issues: https://github.com/AlaskaAirlines/auro-popover/issues
- npm.io page: https://npm.io/package/@aurodesignsystem/auro-popover

## Dependencies (1)

- [lit](https://npm.io/package/lit.md) ^3.3.3

## Recent versions

- 6.1.0 (latest) — 2026-09-22
- 6.0.0-rc-1638618.1 (rc) — 2026-09-22
- 4.0.0-beta.1 (beta) — 2024-09-30
- 6.0.4 — 2026-07-22
- 6.0.0-rc-132.1 — 2026-07-22
- 6.0.3 — 2026-05-20
- 6.0.0-rc-128.1 — 2026-05-20
- 6.0.2 — 2026-05-07
- 6.0.0-rc-123.2 — 2026-05-06
- 6.0.0-rc-123.1 — 2026-05-05
- 6.0.1 — 2026-01-27
- 6.0.0-rc-120.1 — 2026-01-26
- 6.0.0-rc-111.1 — 2025-10-30
- 6.0.0 — 2025-09-30
- 6.0.0-rc-1.1 — 2025-09-29
- … 25 more at https://npm.io/package/@aurodesignsystem/auro-popover/versions

## README

<!--
The README.md file is a compiled document. No edits should be made directly to this file.

README.md is created by running `npm run build:docs`.

This file is generated based on a template fetched from
`https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/README.md`
and copied to `./componentDocs/README.md` each time the docs are compiled.

The following sections are editable by making changes to the following files:

| SECTION                | DESCRIPTION                                       | FILE LOCATION                       |
|------------------------|---------------------------------------------------|-------------------------------------|
| Description            | Description of the component                      | `./docs/partials/description.md`    |
| Use Cases              | Examples for when to use this component           | `./docs/partials/useCases.md`       |
| Additional Information | For use to add any component specific information | `./docs/partials/readmeAddlInfo.md` |
| Component Example Code | HTML sample code of the components use            | `./apiExamples/basic.html`          |
-->

# Popover

<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
<!-- The below content is automatically added from ./docs/partials/description.md -->
The `<auro-popover>` element attaches to another element and displays on hover. It uses the [Popper.js](https://popper.js.org/) library to position itself relative to the trigger element and supports placement options such as `top` and `bottom`.
<!-- AURO-GENERATED-CONTENT:END -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
<!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
<!-- AURO-GENERATED-CONTENT This file is to be used for any additional content that should be included in the README.md which is specific to this component. -->
<!-- AURO-GENERATED-CONTENT:END -->

## Use Cases

<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
<!-- The below content is automatically added from ./docs/partials/useCases.md -->
The `auro-popover` element should be used in situations where users may:

* interact with an element to get clarification on content offering
* provide definition to iconic imagery
* when helper text is required
<!-- AURO-GENERATED-CONTENT:END -->

## Install

<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentInstall.md) -->
[![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-popover/release.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-popover/actions/workflows/release.yml)
[![See it on NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-popover?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-popover)
[![License](https://img.shields.io/npm/l/@aurodesignsystem/auro-popover?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0)
![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge)

<pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/auro-popover</code></pre>

<!-- AURO-GENERATED-CONTENT:END -->

### Define Dependency in Project

<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImportDescription.md) -->
Defining the dependency within each project that is using the `<auro-popover>` component.

<!-- AURO-GENERATED-CONTENT:END -->
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImport.md) -->

<pre class="language-js"><code class="language-js">import "@aurodesignsystem/auro-popover";</code></pre>

<!-- AURO-GENERATED-CONTENT:END -->

### Use CDN

<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/bundleInstallDescription.md) -->
In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.

<pre class="language-html"><code class="language-html">&lt;script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-popover@latest/+esm"&gt;&lt;/script&gt;</code></pre>

<!-- AURO-GENERATED-CONTENT:END -->

## Basic Example

<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->

<pre class="language-html"><code class="language-html">&lt;auro-popover&gt;
  Top popover content!
  &lt;auro-button slot="trigger"&gt;Popover Test&lt;/auro-button&gt;
&lt;/auro-popover&gt;</code></pre>
<!-- AURO-GENERATED-CONTENT:END -->

## Custom Component Registration for Version Management

There are two key parts to every Auro component: the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element definition.
The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML.

When you install the component as described on the `Install` page, the class is imported automatically, and the component is registered globally for you.

However, if you need to load multiple versions of the same component on a single page (for example, when two projects depend on different versions), you can manually register the class under a custom element name to avoid conflicts.

You can do this by importing only the component class and using the `register(name)` method with a unique name:

<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
<!-- The below content is automatically added from ./docs/partials/customRegistration.md -->

<pre class="language-js"><code class="language-js">// Import the class only
import { AuroPopover } from '@aurodesignsystem/auro-popover/class';
​
// Register with a custom name if desired
AuroPopover.register('custom-popover');</code></pre>

This will create a new custom element `<custom-popover>` that behaves exactly like `<auro-popover>`, allowing both to coexist on the same page without interfering with each other.
<!-- AURO-GENERATED-CONTENT:END -->
<div class="exampleWrapper exampleWrapper--flex">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./apiExamples/custom.html) -->
<!-- The below content is automatically added from ./apiExamples/custom.html -->
<!-- The slot=trigger attribute is bound directly to the auro-button element  -->
<custom-popover>
    Top popover content!
<auro-button slot="trigger">Popover Test</auro-button>
</custom-popover>
<!-- Using the placement=bottom attribute -->
<custom-popover placement="bottom">
    Popover content!
<auro-button slot="trigger">Popover Test</auro-button>
</custom-popover>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/custom.html) -->
<!-- The below code snippet is automatically added from ./apiExamples/custom.html -->

<pre class="language-html"><code class="language-html">&lt;!-- The slot=trigger attribute is bound directly to the auro-button element  --&gt;
&lt;custom-popover&gt;
  Top popover content!
  &lt;auro-button slot="trigger"&gt;Popover Test&lt;/auro-button&gt;
&lt;/custom-popover&gt;
&lt;!-- Using the placement=bottom attribute --&gt;
&lt;custom-popover placement="bottom"&gt;
  Popover content!
  &lt;auro-button slot="trigger"&gt;Popover Test&lt;/auro-button&gt;
&lt;/custom-popover&gt;</code></pre>
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

---
_Source: https://npm.io/package/@aurodesignsystem/auro-popover · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._