IxDF Design System

“Tooltip” Component

Design: zeplin.

Tooltips provide additional information on mouse hover (on mouse-enabled devices) or tap (on touch devices). They’re often used to provide non-essential text to explain an element.

Guidelines

  • Do not use tooltips to convey essential information. If the information is important, it should appear on the page or beneath a form field.
  • Tooltips should contain as little text as possible. If a tooltip has too much text, consider using a modal dialog to display the information instead.
  • Tooltips should contain information that helps to explain a potentially confusing or complex element. If something is self-evident, it does not require a tooltip.
  • If a tooltip is on a form field, it should not cover the form field. An exception applies to tooltips on the rich text editor.
  • When possible an info icon should be used for each tooltip to signify to a user that a tooltip with additional text is available.

Example

default tooltip tip-bottom tip-center tip-wide tip-small has-tip

Usage

<span data-tip data-title="A tooltip displaying at the start of the element.">default tooltip</span>
<span class="tip-bottom" data-tip data-title="A tooltip displaying at the bottom of the element.">tip-bottom</span>
<span class="tip-center" data-tip data-title="A tooltip with the arrow at the middle of the element.">tip-center</span>
<span class="tip-wide" data-tip data-title="A wide tooltip for long strings or whatever.">tip-wide</span>
<span class="has-tip" data-tip data-title="A bold looking tooltip.">has-tip</span>

Tooltip Classes

Class Details
tip-bottom Show tip at bottom
tip-center Show tip at center
tip-left Show tip at left
tip-wide Show a wide tip
has-tip Make element with tooltip bold
tip-rtl Used along with tip-bottom but this avoids collision with window edge