Tooltip

Base

  • note: wrapping around the wrong element may result in conflicting CSS. In the example below, wrapping just the label or just the input would break the adjacent selector in the checkbox component.
  • The tooltip component may also be applied directly to particilar elements in some cases too.
  • Tooltips should not be added to elements with the title attribute, as the two will conflict.
<div class="Checkbox Checkbox--inline">
  <span class="Tooltip" data-tooltip="Tooltips can be applied to various elements by wrapping a specific piece in the tooltip component.">
    <input class="Checkbox-input" type="checkbox" id="checkbox-1" name="checkbox-1" disabled>
    <label class="Checkbox-label" for="checkbox-1"></label>
  </span>
</div>

Using Icons

  • When applying to an icon, the Tooltip--icon modifier should be used for the appropriate icon styles.
  • Note: you can add a focus state to pin open tooltips on icons and text by adding tabindex="0" to the element
<span class="Tooltip Tooltip--icon" tabindex="0" data-tooltip="Tooltips can be applied to multiple elements simply by adding a class and data attribute.">
  <svg viewBox="0 0 960 960" class="Icon">
    <path d="M480 9.6c84.9 0 163.5 21.1 235.7 63.2S845 172.1 887.2 244.3c42.1 72.2 63.2 150.8 63.2 235.7s-21.1 163.5-63.2 235.7C845 787.9 787.9 845 715.7 887.2c-72.2 42.1-150.8 63.2-235.7 63.2s-163.5-21.1-235.7-63.2C172.1 845 115 787.9 72.8 715.7S9.6 564.9 9.6 480s21.1-163.5 63.2-235.7S172.1 115 244.3 72.8 395.1 9.6 480 9.6zm0 291.1c18.9 0 35.6-7 50-21.1 14.4-14 21.6-30.5 21.6-49.5s-7.2-35.8-21.6-50.5-31-22-50-22-35.6 7.3-50 22-21.6 31.5-21.6 50.5 7.2 35.4 21.6 49.5c14.4 14 31.1 21.1 50 21.1zm-68.6 461.5h137.2c9.1 0 16.7-2.9 22.5-8.8s8.8-13.4 8.8-22.5v-31.4c0-9.1-2.9-16.7-8.8-22.5s-13.4-8.8-22.5-8.8l1-250.9c0-8.5-3.1-15.8-9.3-22-6.2-6.2-13.6-9.3-22-9.3H411.4c-9.1 0-16.7 2.9-22.5 8.8s-8.8 13.4-8.8 22.5v31.4c0 9.1 2.9 16.7 8.8 22.5s13.4 8.8 22.5 8.8v188.2c-9.1 0-16.7 2.9-22.5 8.8s-8.8 13.4-8.8 22.5v31.4c0 9.1 2.9 16.7 8.8 22.5s13.4 8.8 22.5 8.8z" />
  </svg>
</span>

Using Text

  • When applying to a piece of basic text, the Tooltip--text modifier should be used for the appropriate text styles.
Text Based Tooltip 
<span class="Tooltip Tooltip--text" data-tooltip="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultricies placerat nisi et lobortis. Curabitur laoreet imperdiet odio">Text Based Tooltip</span>