“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

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