Infotip Component

An infotip is a button which can be clicked to display information about another element or area on the page.

Toggle the aria-expanded state of the button to expand or collapse the infotip.

<span class="infotip">
  <button
    class="icon-btn icon-btn--transparent infotip__host"
    type="button"
    aria-expanded="false"
    aria-label="Help"
  >
    <svg class="icon icon--16" width="16" height="16" aria-hidden="true">
      <use href="#icon-information-16" />
    </svg>
  </button>
  <div class="infotip__overlay" style="top: 30px; left: -6px">
    <span class="infotip__pointer infotip__pointer--top-left" />
    <div class="infotip__mask">
      <div class="infotip__cell">
        <span class="infotip__content">
          <h3 class="infotip__heading">Infotip</h3>
          <p>Here's a tip to help you be successful at your task.</p>
        </span>
        <button
          class="icon-btn icon-btn--transparent infotip__close"
          type="button"
          aria-label="Dismiss infotip"
        >
          <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
            <use href="#icon-close-16" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</span>

By default, the position of the overlay and its pointer will remain static. For these following examples, we are using floating-ui to help position the tooltip and the pointer dynamically.

In order to get this to work with floating-ui, you need to remove pointer position infotip__pointer--top-left and remove any style positioning

<span class="infotip">
  <button
    class="icon-btn icon-btn--transparent infotip__host"
    type="button"
    aria-expanded="false"
    aria-label="Help"
  >
    <svg class="icon icon--16" width="16" height="16" aria-hidden="true">
      <use href="#icon-information-16" />
    </svg>
  </button>
  <div class="infotip__overlay">
    <span class="infotip__pointer" />
    <div class="infotip__mask">
      <div class="infotip__cell">
        <span class="infotip__content">
          <h3 class="infotip__heading">Infotip</h3>
          <p>Here's a tip to help you be successful at your task.</p>
        </span>
        <button
          class="icon-btn icon-btn--transparent infotip__close"
          type="button"
          aria-label="Dismiss infotip"
        >
          <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
            <use href="#icon-close-16" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</span>

If nesting an infotip inside of a paragraph element, make sure that there are no block level elements, such as div , h1-6 , or p elements.

<p>
  Inside paragraph
  <span class="infotip">
    <button
      class="icon-btn icon-btn--transparent infotip__host"
      type="button"
      aria-expanded="false"
      aria-label="Help"
    >
      <svg class="icon icon--16" width="16" height="16" aria-hidden="true">
        <use href="#icon-information-16" />
      </svg>
    </button>
    <span class="infotip__overlay">
      <span class="infotip__pointer" />
      <span class="infotip__mask">
        <span class="infotip__cell">
          <span class="infotip__content">
            <span class="infotip__heading" role="heading" aria-level="5">
              Infotip
            </span>
            <span> Here's a tip to help you be successful at your task. </span>
          </span>
          <button
            class="icon-btn icon-btn--transparent infotip__close"
            type="button"
            aria-label="Dismiss infotip"
          >
            <svg
              class="icon icon--16"
              height="24"
              width="24"
              aria-hidden="true"
            >
              <use href="#icon-close-16" />
            </svg>
          </button>
        </span>
      </span>
    </span>
  </span>
</p>

Modal Infotip

On small screens, the infotip should launch a modal lightbox-dialog.

<span class="infotip">
  <button
    class="icon-btn icon-btn--transparent infotip__host"
    type="button"
    aria-expanded="false"
    aria-label="Help"
  >
    <svg class="icon icon--16" width="16" height="16" aria-hidden="true">
      <use href="#icon-information-16" />
    </svg>
  </button>
</span>
<div
  aria-labelledby="lightbox-dialog-title"
  aria-modal="true"
  hidden
  class="lightbox-dialog"
  role="dialog"
>
  <div class="lightbox-dialog__window">
    <button class="lightbox-dialog__handle" type="button" />
    <div class="lightbox-dialog__header">
      <h2>Info</h2>
      <button
        aria-label="Close dialog"
        class="icon-btn lightbox-dialog__close"
        type="button"
      >
        <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
          <use href="#icon-close-16" />
        </svg>
      </button>
    </div>
    <div class="lightbox-dialog__main" id="lightbox-dialog-title">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
      </p>
    </div>
  </div>
</div>