Tooltips - Component

Use tooltips to provide information about UI controls that are too small to have a label.

Code

Source (Nunjucks)

<div class="tooltip" data-alignment="{{ data.modifier }}">
  <button class="fab" aria-labelledby="{{ data.tooltipID }}">
    {% include "icons/plus.svg" %}  
  </button>
  <span class="tooltip__content" role="tooltip" id="{{ data.tooltipID }}">{{ data.tooltip }}</span>
</div>

Output

<div class="tooltip" data-alignment="">
  <button class="fab" aria-labelledby="mytooltip">
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="currentColor"
      role="img"
      aria-label="plus"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path d="M20 13h-7v7h-2v-7H4v-2h7V4h2v7h7v2z" />
    </svg>
  </button>
  <span class="tooltip__content" role="tooltip" id="mytooltip"
    >Standard alignment</span
  >
</div>

Information

Tooltips use position: absolute, so it's crucial that the element that your tooltip is assigned to has plenty of space around it.

Key links

Sass File

Variants

Left aligned

View full screen

Code

Source (Nunjucks)

<div class="tooltip" data-alignment="{{ data.modifier }}">
  <button class="fab" aria-labelledby="{{ data.tooltipID }}">
    {% include "icons/plus.svg" %}  
  </button>
  <span class="tooltip__content" role="tooltip" id="{{ data.tooltipID }}">{{ data.tooltip }}</span>
</div>

Output

<div class="tooltip" data-alignment="left">
  <button class="fab" aria-labelledby="mytooltip">
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="currentColor"
      role="img"
      aria-label="plus"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path d="M20 13h-7v7h-2v-7H4v-2h7V4h2v7h7v2z" />
    </svg>
  </button>
  <span class="tooltip__content" role="tooltip" id="mytooltip"
    >Left aligment</span
  >
</div>

Right aligned

View full screen

Code

Source (Nunjucks)

<div class="tooltip" data-alignment="{{ data.modifier }}">
  <button class="fab" aria-labelledby="{{ data.tooltipID }}">
    {% include "icons/plus.svg" %}  
  </button>
  <span class="tooltip__content" role="tooltip" id="{{ data.tooltipID }}">{{ data.tooltip }}</span>
</div>

Output

<div class="tooltip" data-alignment="right">
  <button class="fab" aria-labelledby="mytooltip">
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="currentColor"
      role="img"
      aria-label="plus"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path d="M20 13h-7v7h-2v-7H4v-2h7V4h2v7h7v2z" />
    </svg>
  </button>
  <span class="tooltip__content" role="tooltip" id="mytooltip"
    >Right aligment</span
  >
</div>