Back to Popover-guidelines

Web ComponentThe latest version of this package is: 0.8.0, Opens in new window

Webcomponent for Popover

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-wc/popover@0.8.0

Table of Contents


<button class="if icon ui info blue" id="custom-trigger-2"></button>
  data-title="Blue Info button popover"
  data-text="Add relevant text here. E.g: This element is initially positioned on bottom."
  data-text="We need the last know adress to be able to pinpoint migration patterns..."
<script src="…popover-webcomponent.iife.js"></script>


Property Type Description Required
data-text String The text to use in Popover Yes
data-title String The title to use in Popover No
data-trigger-element-id String Popover trigger element id Yes
data-placement String The position to set, default is "top" No
popover-close-button-aria-label String The close button aria label, default "Close" No
error-popover String/Boolean is the Popover of type Error No


The webcomponent fires a CustomEvent for opening and closing of the component.

document.addEventListener('ids:send:popover', e => { console.log(e); });
Event Type Description
ids:send:popover CustomEvent Event fired on open
ids:send:popover CustomEvent Event fired on close

The payload of the event looks something like this:

// For opened event
detail: { source: "IDS_POPOVER", type: "POPOVER_OPENED", payload: { id: "<uuid>" } }
// For closed event
detail: { source: "IDS_POPOVER", type: "POPOVER_CLOSED", payload: { id: "<uuid>" } }


Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

0.8.0 (2023-03-16)


  • 🧨 Removed help/info tooltip; Popover webcomponent

✅ Closes: 744733

Contact us, Opens in new window