Web APIsLesson 57Free preview

Popover API

This lesson is part of HTML · All levels

Summary

Popover API allows you to display additional panels such as tooltip, menu, or small dialogs above the main content without having to create a custom layout. Activate it with the popover attribute on the element, and then display it using the popover-target attribute on the button or link. The browser handles automatic loading and closing so that the implementation is much simpler.

Key points

The popover attribute makes the element a popover panel
Popovertarget on the display or hide popover button
Popover appears on top of other content and can be closed with Esc
Replacing the previously manual-written tooltip and capital patterns

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.