Overview

ds-richtip is for displaying more complex, rich content tooltips, and uses the content inside the ds-richtip__content element.

For simple tooltips that use plain text, see ds-texttip

Options

Basic usage

Rich content

Visual states

Tip Position

By adding the appropriate --tip-* class, the position of the tip can be changed.

Component colors

Pinnable tips

By default the richtip content is shown when hovering over the ds-richtip__button. Using the following html structure instead will require a click to to show and hide the richtip content.

Javascript

The following example code improves functionality by adding a delay when moving from the trigger element to the __content element, making it easier interact with the popup tip:

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.ds-richtip').forEach((el) => {
    let t;
    el.addEventListener('mouseenter', () => {
      clearTimeout(t);
      el.classList.add('--active');
    });
    el.addEventListener('mouseleave', () => {
      t = setTimeout(() => el.classList.remove('--active'), 250);
    });
  });
});

Examples