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.0Table of Contents
Usage
<button class="if icon ui info blue" id="custom-trigger-2"></button>
<ids-popover
data-trigger-element-id="custom-trigger-2"
data-placement="bottom"
data-title="Blue Info button popover"
data-text="Add relevant text here. E.g: This element is initially positioned on bottom."
popover-close-button-aria-label="Close"
>
</ids-popover>
<ids-popover
data-text="We need the last know adress to be able to pinpoint migration patterns..."
>
</ids-popover>
<script src="…popover-webcomponent.iife.js"></script>Properties
| 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 |
Events
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>" } }Changelog
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)
BREAKING CHANGES
- 🧨 Removed help/info tooltip; Popover webcomponent
✅ Closes: 744733