Popover Attribute Polyfill
Explainer
This polyfills the HTML popover
attribute and showPopover
/hidePopover
methods onto HTMLElement.
Polyfill Installation
Download a copy
The simplest, recommended way to install the polyfill is to copy it into your
project.
Download popover.js
(or popover.min.js
) from
unpkg.com and add it
to the appropriate directory in your project. Then, include it where necessary
with a <script>
tag:
<script src="/path/to/popover.min.js" type="module"></script>
Or without JavaScript modules:
<script src="/path/to/popover.iife.min.js"></script>
You will also likely need the CSS file, which supplies some default styles.
Download popover.css
from
unpkg.com and add it
to the appropriate directory in your project. Then, include it where necessary
with a <link rel=stylesheet>
tag:
<link rel="stylesheet" src="/path/to/popover.css" />
Note that default styles will not be applied to shadow roots.
Each root node will need to include the styles separately.
With npm
For more advanced configuration, you can install with
npm:
npm install @oddbird/popover-polyfill
After installing, you’ll need to use appropriate tooling to use
node_modules/@oddbird/popover-polyfill/dist/popover.js
.
You will also likely need to include the CSS stylesheet which is found in
node_modules/@oddbird/popover-polyfill/dist/popover.css
.
If you want to manually apply the polyfill, you can instead import the
isSupported
and apply
functions directly from
node_modules/@oddbird/popover-polyfill/dist/popover-fn.js
file.
Via CDN
For prototyping or testing, you can use the npm package via a Content Delivery
Network. Avoid using JavaScript CDNs in production, for many good
reasons such as
performance and robustness.
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@oddbird/popover-polyfill@latest/dist/popover.css"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/@oddbird/popover-polyfill@latest"
crossorigin="anonymous"
defer
></script>
Usage
After installation the polyfill will automatically add the correct methods and
attributes to the HTMLElement class.
Contributing
Visit our contribution guidelines.