Tooltips

CSS file | JS file

Tooltips provide brief contextual descriptions when the user hovers over an element.

<!-- Button example -->
<button class="sba-c-button sba-c-button--icon-only sba-c-button--transparent sba-u-color--error-dark " type="button" data-tooltip-text="Remove item">
  <svg aria-hidden="true" class="sba-c-icon">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/certify-design-system-documentation/assets/svg-sprite/sprite.svg#trash">
</button>
<!-- Link example -->
<a href="javascript:void()" data-tooltip-text="Next">
  <svg aria-hidden="true" class="sba-c-icon">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/certify-design-system-documentation/assets/svg-sprite/sprite.svg#arrow-alt-circle-right"></use>
  </svg>
</a>
<!-- Text link-->
<span data-tooltip-text="Eligible: Jane Smith (BOS)">
  <svg aria-hidden="true" class="sba-c-icon sba-c-icon--green">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/certify-design-system-documentation/assets/svg-sprite/sprite.svg#check-circle"></use>
  </svg>
</span>

How it works

• Adding the attribute data-tooltip-text to an element will create the tooltip
• When the tooltip is created, the button will be wrapped in a <span>. Be aware of this just in case this appears in `flexbox` container.

Guidance

• Label text should be brief, maximum of five words
• Should always be used for icon-only buttons

Accessibility

• Accessibility features, such are aria attributes are generated with javascript.
• When using tooltips, avoid using title attributes.

When to consider something else

• Consider making the text visible on the page or using an accordion if text is longer than five words.