Back to guidelines

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

Webcomponent for Info Tooltip

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/info-tooltip@0.3.4

Table of Contents

Usage

<ids-info-tooltip
  data-text="We need the last know adress to be able to pinpoint migration patterns..."
>
</ids-info-tooltip>
<script src="…info-tooltip-webcomponent.iife.js"></script>

Properties

Property Type Description Required
data-text String The text to use in Info Tooltip Yes
data-title String The title to use in Info Tooltip No
data-standalone String/Boolean To indicate that it is used alone, not next to text No

Events

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

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

The payload of the event looks something like this:

// For opened event
detail: { source: "IDS_INFO_TOOLTIP", type: "INFO_TOOLTIP_OPENED", payload: { id: "<uuid>" } }
// For closed event
detail: { source: "IDS_INFO_TOOLTIP", type: "INFO_TOOLTIP_CLOSED", payload: { id: "<uuid>" } }
Contact us, Opens in new window