Recipe 13.5

Showing 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

This is a way to show pop-up content without any JavaScript. The pop-up content has the popover attribute and the button that triggers it has the popovertarget attribute which references the ID of the popover element.

Demo

Hello world!

Code

JavaScript

/* No JavaScript needed! */

HTML

<button type="button" class="btn btn-primary" popovertarget="greeting">Open Popover</button>
<div popover id="greeting">Hello world!</div>