Back to Popopover-guidelines
JavaScriptThe latest version of this package is: 0.18.6, Opens in new window
JavaScript library for the Panel Component
This component is compatible with ESM (ES6 module) and IIFE. See documentation examples below.
To be able to install this component, please refer to the Project Setup documentation.
$ npm i @ids-js/popover@0.18.6
Table of Contents
Usage
Markup
By attributes
<button
data-popover="left"
data-popover-title="Vilket år blev du ägare?"
data-popover-text="Villaförsäkringen gäller för dig, de du bor med, de saker du äger, hyr eller lånar, byggnaderna och tomten. Försäkringen är en trygghet för dig som äger hus."
type="button"
class="if button"
>
Some text..
</button>
<script src="/assets/popover.iife.js"></script>
const popoversByAtts = document.querySelectorAll('[data-popover]');
popoversByAtts.forEach((anchor) => {
new IDSPopover.Popover({ anchor });
});
By HTML
<button type="button" class="if icon-button ui icon trashcan" id="anchor-01">
Anchor
</button>
<div class="if popover right" id="popover-01">
<button type="button" class="if close" aria-label="Close"></button>
<span class="if title">Vilket år blev du ägare?</span>
<span class="if text">
Villaförsäkringen gäller för dig, de du bor med, de saker du äger, hyr eller
lånar, byggnaderna och tomten. Försäkringen är en trygghet för dig som äger
hus.
</span>
</div>
<script src="/assets/popover.iife.js"></script>
const anchorEl = document.getElementById('anchor-01');
const popoverEl = document.getElementById('popover-01');
new IDSPopover.Popover({ popover: popoverEl, anchor: anchorEl });
Changelog
Change Log
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
0.17.0 (2021-10-21)
Code Refactoring
- 💡 Remove support for CommonJS (9f84d9a)
BREAKING CHANGES
- 🧨 We have removed the support for CommonJS for all @ids-js packages
0.16.1 (2021-10-21)
Bug Fixes
- Use common for cjs and main for esm (96f673d)