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

…
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');
    }
  }
};
…