Back to Tooltip Menu-guidelines

CSS ComponentThe latest version of this package is: 14.1.0, Opens in new window

Bundle

This component provides .css, .styl, .less and .scss -files.

To be able to install this component, please refer to the Project Setup documentation.

$ npm i @ids-core/tooltip-menu@14.1.0

Barneforsikring

Barneforsikringen som hjelper barnet livet ut

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

Table of Contents

Edit this section, Opens in new window

Usage

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

Position

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

<nav role="menu" class="if tooltip-menu right is-open">
  <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>
<nav role="menu" class="if tooltip-menu bottom is-open">
  <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>
<nav role="menu" class="if tooltip-menu left is-open">
  <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>
<nav role="menu" class="if tooltip-menu top is-open">
  <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>
Edit this section, Opens in new window

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, Opens in new window

Changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

14.0.4 (2021-11-15)

Bug Fixes

  • Several fixes reported by Monta (8619659)

14.0.0 (2021-11-09)

chore

  • 🤖 Rename util to utils (f78721f)

Code Refactoring

  • 💡 Rename scope and repository (3ea5423)
  • 💡 Use new navigation structure for documentation (415aee5), closes #490579

Documentation

  • ✏️ Update links and change navigation structure (0bfd27d), closes #490579

BREAKING CHANGES

  • 🧨 The scope for If Design System npm packages has now changed from

@if-design-system to @ids-core. We have also renamed the repository from if-design-system to ids-core

  • 🧨 Util is now renamed to Utils
  • 🧨 We have now changed the navigation structure for the documentation site.

Please update any saved links!

  • 🧨 Navigation structure has now changed. Please see release notes!

13.11.0 (2021-10-19)

Features

  • 🎸 Input field hot reload (eac76b7)

13.9.2 (2021-09-30)

Bug Fixes

  • 🐛 Complete the pseudo-element fix (1dcee2c)

13.6.3 (2021-09-17)

Bug Fixes

12.13.1 (2021-08-11)

Bug Fixes

12.13.0 (2021-08-11)

Bug Fixes

12.12.1 (2021-08-10)

Bug Fixes

  • 🐛 Make sure components using fonts, have fonts bundled (d5bb642), closes #354912

12.6.0 (2021-05-27)

Bug Fixes

  • 🐛 Manually set firstPublished and lastModified (e83af7d)
  • 🐛 We don't need lastModified (e458a12)

12.0.0 (2021-05-05)

Code Refactoring

  • 💡 Refactor and rename context menu to Tooltip Menu (7c7f8b1), closes #336508
  • 💡 Rename and consolidate mixins (67cf470), closes #268081
  • 💡 Renamed USPs component to Quick Facts (9120381), closes #336508

BREAKING CHANGES

  • 🧨 All of the mixins have now been renamed
  • 🧨 USPs component is now renamed to Quick Facts
  • 🧨 Context Menu is refactored out and renamed to Tooltip Menu
Edit this section, Opens in new window
Contact us, Opens in new window