Popovers

Elements provides a set of popover type components built on the native browser Popover API

Available Elements

tooltip: contextual text only hints
toggletip: contextual interactive hints
dropdown: interactive navigation or form content
dialog: large interactive content, interrupts user flow
toast: contextual notification
notification: async non contextual notification
drawer: interactive navigation or extra contextual content

Installation

Interactive showcase of all popover types (tooltip, toast, drawer, dropdown, dialog, notification) using modern popovertarget API.

Usage

Basic tooltip triggered by popovertarget attribute. Use for providing brief, contextual information on hover or focus without cluttering the interface.

Events

Some popover types such as tooltip have complex interactions such as showing when hovered or focused. To simplify these interactions all popover type elements provide a open and close event to notify when the popover is attempting to close or open based on a user interaction. You can also listen to the native toggle or beforetoggle popover events.

Event handling for tooltip lifecycle events. Useful for adding custom behavior when tooltip state changes.

Programmatic Trigger

You can trigger popovers manually via the native popover APIs.

Programmatic popover control with async operations before showing the popover.

Positioning

All popovers follow the same position and alignment APIs. This allows popovers to position themselves relative to their anchor.

Fine-grained tooltip alignment combined with positioning for precise placement control. Use to align tooltips to specific edges of trigger elements, improving visual hierarchy and reducing overlap with other UI elements.

Anchor

The anchor property defines what element the popover should position itself relative to. For popovers like modals this defaults to the document body. The Anchor is optional as the popover uses the trigger to determine its anchor by default.

Anchor-based positioning where popovers anchor to specific elements rather than their triggers.

For elements like tooltips this is often the same as anchor but the anchor and trigger are not always the same as UX patterns such as guided tours may have trigger elements that are not the anchored position. Both anchor and trigger can take a string idref or a DOM Element reference.

Closable

Many of the popovers provide a closable property option. This enables a close button on the popover. When using native HTML popover APIs, it's important to understand how they handle closure via the escape key. Unlike some third-party solutions, browser-native popovers disable escape key prevention for closure by design, ensuring a seamless user experience. Similarly, native dialogs follow a similar pattern (chromium): only the first press of the escape key can prevent the dialog from closing, while later presses have no effect. This behavior is for accessibility, preventing a popover from closing can prevent the user from navigating the page and block functionality.

Simple modal dialog with keyboard accessibility, including escape key to close functionality.

Nested

Nested popovers within dialogs and notifications, with proper layering and stacking order.

Event Bubbling

Custom events like many standard DOM events bubble. When listening to larger DOM trees, check which element dispatched the source event.

Invoker Commands

The Invoker Command APIs can also dispatch command events to show and hide popovers.

Use the commandfor and command attributes to trigger custom Invoker Commands, such as toggling a dialog.

Shadow Root Anchoring

Native CSS Anchor Positioning allows two elements to tether together via a unique identifier. This is commonly used for popover-like elements. CSS Anchor Positioning recently enabled cross root associations. https://github.com/w3c/csswg-drafts/issues/9408.

But the declarative native popover API requires popovers and the trigger/source to still exist within the same render root and not separate by Shadow DOM. Elements attempts to bridge this gap by traversing and making the association for the trigger and popover. This is not 100% reliable, in general popovers should ideally be within the same render root for best performance.