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

Overview

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

Edit this section

Usage

Style

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.

Principles

Interaction

Mobile

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

Positioning

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.

Desktop

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.

Mobile

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

Edit this section

Behaviours

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

Accessibility

Touch/Click area

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

  1. Touch area
  2. Button
Edit this section

Anatomy

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

Code

Html

<button class="if help-tooltip-button" type="button" aria-label="More information"></button>
<div
  class="if help-tooltip-popover [is-open]"
  aria-hidden="false"
  aria-labelledby="<title-identifier>"
  aria-describedby="<text-identifier>"
  role="dialog"
>
  <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>
</div>

Javascript

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

_medium_mq.addListener(_handleMedium);

_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.style.left = `${_popover_el.getBoundingClientRect().left - _popover_el.offsetLeft - 24}px`;

    if (VH / 2 - _mobile_popover_rect.height < _button_rect.top) {
      _popover_el.style.top = `${_button_el.offsetTop - _mobile_popover_rect.height - _button_rect.height}px`;
      _popover_el.classList.remove('bottom');
    } else {
      _popover_el.style.top = `${_button_rect.height + 24}px`;
      _popover_el.classList.add('bottom');
    }

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

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

    if (VH / 2 - _popover_el.getBoundingClientRect().height < _button_rect.top) {
      _popover_el.style.top = `${
        _button_el.offsetTop - _popover_el.getBoundingClientRect().height - _button_rect.height
      }px`;
      _popover_el.classList.remove('bottom');
    } else {
      _popover_el.style.top = `${_button_rect.height + 24}px`;
      _popover_el.classList.add('bottom');
    }
  }
};

Webcomponent

The webcomponent is fully scoped, and uses shadow DOM.

Install

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

Or for Yarn:

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

Usage

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

Properties

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

Events

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