Tooltip Component

<span class="tooltip">
  <button
    accesskey="s"
    class="icon-btn tooltip__host"
    aria-describedby="tooltip-0"
    aria-expanded="false"
    aria-label="Settings"
  >
    <svg class="icon icon--24" height="16" width="16" aria-hidden="true">
      <use href="#icon-settings-24" />
    </svg>
  </button>
  <div
    class="tooltip__overlay"
    id="tooltip-0"
    role="tooltip"
    style="top: 48px; left: 4px"
  >
    <span class="tooltip__pointer tooltip__pointer--top-left" />
    <div class="tooltip__mask">
      <div class="tooltip__cell">
        <div class="tooltip__content">
          <p>Use Access Key 'S' to display settings.</p>
        </div>
      </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 tooltip__pointer--top-left and remove any style positioning

<span class="tooltip">
  <button
    accesskey="s"
    class="icon-btn tooltip__host"
    aria-describedby="tooltip-0"
    aria-expanded="false"
    aria-label="Settings"
  >
    <svg class="icon icon--24" height="16" width="16" aria-hidden="true">
      <use href="#icon-settings-24" />
    </svg>
  </button>
  <div class="tooltip__overlay" id="tooltip-0" role="tooltip">
    <span class="tooltip__pointer" />
    <div class="tooltip__mask">
      <div class="tooltip__cell">
        <div class="tooltip__content">
          <p>Use Access Key 'S' to display settings.</p>
        </div>
      </div>
    </div>
  </div>
</span>