0Pricing
HTML Academy · Lesson

The Popover API

Create tooltips and dialogs with the native popover attribute.

What the Popover API Does

The Popover API gives HTML a native way to create popovers, dialogs, tooltips, and menus — without manual JavaScript for positioning, focus handling, light-dismiss, or escape-to-close. Built-in behavior matches user expectations.

The popover Attribute

Add popover to any element to make it a popover. It is hidden by default. A trigger button with popovertarget="popover-id" shows it on click. The browser handles open/close state automatically.

<button popovertarget="info">Show details</button>
<div id="info" popover>
  <p>Here is some popover content.</p>
</div>

All lessons in this course

  1. Declarative Shadow DOM
  2. The Popover API
  3. The selectlist Element
  4. Interest Invokers and Command Attribute
← Back to HTML Academy