Back to Popopover-guidelines

JavaScriptThe latest version of this package is: 0.17.4, 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.17.4

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 });

Api

IDSPopover

Kind:

global class

new IDSPopover(args)

Param Type Description
args Object
args.popover string The popover element to use
args.anchor string The anchor element to use

Example

// Example code
new IDSPopover.Popover({ popover: popoverEl, anchor: anchorEl });
Contact us, Opens in new window