Skip to content

Tooltip Menu13.10.5

> Don't you worry about a thing!™


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

Barneforsikring

Barneforsikringen som hjelper barnet livet ut

  • Norges mest kjøpte barneforsikring
  • Uførdekning i voksen alder
  • Økonomisk hjelp ved varig skade
Edit this section

Overview

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

Usage

A Tooltip Menu is a menu to deliver contextual options for the user.

Principles

The Tooltip Menu follows the same styling principles as the Dropdown Menu. The only difference is that the Tooltip Menu has an arrow pointing to the location it originated from.

Edit this section

Behaviours

Modifiers

Position

You can use .left, .right, .top or .bottom to position the arrow.

Edit this section

Accessibility

Remember to use the correct role, aria- and html-attributes for the menu options.

<nav class="if tooltip-menu is-open" tabindex="-1" role="menu" aria-labelledby="menu-0123-trigger" id="menu-0123">
  <ul class="if is-open">
    <li class="if">
      <button tabindex="-1" role="menuitem" class="if" type="button">Reimburse</button>
    </li>
  </ul>
</nav>

When the user navigates the menu with arrow keys, update the selected state with aria-selected.

if (e.key == 'ArrowUp') {
  nextElement = allOptions[--indexOfOptions];
  if (!nextElement) {
    indexOfOptions = allOptions.length - 1;
    nextElement = allOptions[indexOfOptions];
  }

  removePreviouslySelectedMenuItem(menuList);
  nextElement.classList.add('is-focused');
  nextElement.setAttribute('aria-selected', true);
} else if (e.key == 'ArrowDown') {
  nextElement = allOptions[++indexOfOptions];
  if (!nextElement) {
    indexOfOptions = 0;
    nextElement = allOptions[indexOfOptions];
  }
  removePreviouslySelectedMenuItem(menuList);
  nextElement.classList.add('is-focused');
  nextElement.setAttribute('aria-selected', true);
}
Edit this section

Implementation

<nav role="menu" class="if tooltip-menu top is-open center">
  <ul class="if">
    <li class="if">
      <a tabindex="-1" role="menuitem" href="asdasd" class="if">Forsikringer</a>
    </li>
    <li class="if">
      <a tabindex="-1" role="menuitem" href="asdsadsadsa" class="if">Personforsikring </a>
    </li>
  </ul>
</nav>

JavaScript implementation example

const tooltipInitiatorEl = document.querySelector('#tooltip');

tooltipInitiatorEl.addEventListener('click', e => {
  e.preventDefault();
  const tooltipMenuEl = tooltipInitiatorEl.parentElement.querySelector('.if.tooltip-menu');
  tooltipMenuEl.classList.toggle('is-open');
  if (tooltipMenuEl.classList.contains('is-open')) {
    const tooltipInitiatorElRect = tooltipInitiatorEl.getBoundingClientRect();
    const tooltipInitiatorParentElRect = tooltipInitiatorEl.parentElement.getBoundingClientRect();
    const tooltipMenuElRect = tooltipMenuEl.getBoundingClientRect();
    if (tooltipMenuEl.classList.contains('top')) {
      tooltipMenuEl.style.top = `${tooltipInitiatorParentElRect.height + 16}px`;
      tooltipMenuEl.style.left = `${tooltipInitiatorElRect.left -
        tooltipInitiatorParentElRect.left +
        tooltipInitiatorElRect.width / 2 -
        tooltipMenuElRect.width / 2}px`;
    }
  }
});
Edit this section

Contact us