Tooltips

Tooltips are brief labels that may be displayed when the user hovers over a link, button or icon on desktop.


When to Use

  • Use in desktop applications to provide brief help text related to a link, button, icon or similar element on a screen.
  • Tooltips are best suited to desktop applications where users are more likely to be using a mouse. For touch contexts it is not recommended to rely too heavily on this pattern.
  • Use when you need to provide more than ALT-attribute text for images.

When Not to Use

  • Do not use when you need to display additional detailed content such as images, formatted text and/or form elements. Instead, use a popover.

Usage

Tooltips usually appear on top of the element centered at a 5px margin of space from element. They can also appear top, right, bottom or left. They have directional arrows that convey direction from the source.

For more complex content, consider using a Popover or a Modal.

Developer Notes

<button class="spark-btn--icon spark-icon spark-icon-cog spark-tooltip">
  <span class="spark-tooltip__content--left" role="tooltip">
    Change your settings
  </span>
</button>

<button class="spark-btn--icon spark-icon spark-icon-cog spark-tooltip">
  <span class="spark-tooltip__content--top" role="tooltip">
    Change your settings
  </span>
</button>

<button class="spark-btn--icon spark-icon spark-icon-cog spark-tooltip">
  <span class="spark-tooltip__content--bottom" role="tooltip">
    Change your settings
  </span>
</button>

<button class="spark-btn--icon spark-icon spark-icon-cog spark-tooltip">
  <span class="spark-tooltip__content--right" role="tooltip">
    Change your settings
  </span>
</button>

Tooltips are created by adding the .spark-tooltip class to an element. When this element is hovered over, content will be shown. The content is created using a class of .spark-tooltip__content--top, .spark-tooltip__content--bottom, .spark-tooltip__content--left or .spark-tooltip__content--right. These different content classes determine the position of the tooltip.