Recipe 13.6

Manually Controlling a Popover

Compatibility Note: Popover

This feature may not be supported on all browsers yet. Please check the latest compatibility data before using in a production application.

Browser support for Popover

HTML elements have a togglePopover method that will show or hide its contents in a popover.

Demo

Hello World!

Code

JavaScript

const popover = document.querySelector('#greeting');
const trigger = document.querySelector('#trigger');

trigger.addEventListener('click', () => {
  popover.togglePopover();
});

HTML

<button type="button" class="btn btn-primary" id="trigger">Show Popover</button>
<div id="greeting" popover="manual">Hello World!</div>