Skip to content

Help Tooltip13.10.5

The Help Tooltip component displays help on click

$ npm i @if-design-system/help-tooltip@13.10.5

Edit this section


The Help Tooltip component is based on the Popover component and the Icon Button component.

Edit this section



The Help Tooltip component is based on the Popover component and the Icon Button component, but the Help Tooltip Popover is only BR 1, BROWN, never red.




If user touch and holds on the question mark icon the Help Tooltip should be displayed while holding. Technical

The component should not insert or move any elements in the DOM. The component should not self-initiate automatically. A dynamic update of tooltip text should be possible. Sizing


If the Help Tooltip button is over a certain treshold in the viewport, the Help Tooltip Popover should automatically be placed over or under the Help Tooltip button.


The Help Tooltip is center aligned with the button, top or bottom, and the arrow should also be aligned accordingly. In situations where the Help Tooltip Popover would be placed outside of the viewport horizonally to the left, the Help Tooltip Popover is aligned to the left of the container. The arrow is always aligned to where it is initiated from.


The Help Tooltip is always centered in the viewport and the arrow is always centered to the button.

Edit this section


There is currently no documentation for this section yet.
Contact the Design System team for questions.

If you want to contribute, you can also add the documentation yourself!

Edit this section


Touch/Click area

The click/touch area for the Help Tooltip Button is 48x48 px.

  1. Touch area
  2. Button
Edit this section


Help Tooltip
  1. Icon Button with Help Icon
  2. Popover
  3. Close
  4. Title (optional)
  5. Text
Edit this section



<button class="if help-tooltip-button" type="button" aria-label="More information"></button>
  class="if help-tooltip-popover [is-open]"
  <button class="if close" type="button" aria-label="Close"></button>
  [<span class="if title" id="<title-identifier>">Title</span>]
  <span class="if text" id="<text-identifier>">Text</span>


Here is a js snippet on how to positon the Help Tooltip, taken from the webcomponent:

const _medium_mq = window.matchMedia(`screen and (min-width: ${SizeBreakpointMinXs})`);
let _is_medium_mq = true;

const _handleMedium = mql => {
  if (mql.matches) {
    _is_medium_mq = true;
  } else {
    _is_medium_mq = false;


_handleMedium(_medium_mq);const _setPosition = () => {
  const _button_rect = _button_el.getBoundingClientRect();
  const _popover_rect = _popover_el.getBoundingClientRect();
  const _arrow_left_if_popover_overflow = _button_el.offsetLeft + _button_rect.width / 2 - 12;

  const VH = window.innerHeight;
  if (!_is_medium_mq) {
    const _mobile_popover_rect = _popover_el.getBoundingClientRect(); = `${_popover_el.getBoundingClientRect().left - _popover_el.offsetLeft - 24}px`;

    if (VH / 2 - _mobile_popover_rect.height < { = `${_button_el.offsetTop - _mobile_popover_rect.height - _button_rect.height}px`;
    } else { = `${_button_rect.height + 24}px`;
    }'--ids-popover-arrow-vertical-position', `${_button_el.offsetTop}px`);
      `${_arrow_left_if_popover_overflow < 0 ? 0 : _arrow_left_if_popover_overflow}px`
  } else {'--ids-popover-arrow-vertical-position', 'calc(50% - 12px)');'--ids-popover-arrow-horizontal-position', 'calc(50% - 12px)'); = _button_el.offsetLeft + _button_rect.width / 2 - _popover_rect.width / 2 + 'px';

    if (_popover_el.getBoundingClientRect().left < 24) { = '0px';'--ids-popover-arrow-vertical-position', `${_button_el.offsetTop}px`);
        `${_arrow_left_if_popover_overflow < 0 ? 0 : _arrow_left_if_popover_overflow}px`

    if (VH / 2 - _popover_el.getBoundingClientRect().height < { = `${
        _button_el.offsetTop - _popover_el.getBoundingClientRect().height - _button_rect.height
    } else { = `${_button_rect.height + 24}px`;


The webcomponent is fully scoped, and uses shadow DOM.


$ npm install @if-design-system/help-tooltip-webcomponent

Or for Yarn:

$ yarn add @if-design-system/help-tooltip-webcomponent


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


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


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

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

The payload of the event looks something like this:

// For opened event
detail: { source: "IDS_HELP_TOOLTIP", type: "HELP_TOOLTIP_OPENED", payload: { id: "<uuid>" } }
// For closed event
detail: { source: "IDS_HELP_TOOLTIP", type: "HELP_TOOLTIP_CLOSED", payload: { id: "<uuid>" } }
Edit this section

Contact us