3 3

3.7 Tooltips

Purpose

Tooltips display additional information about an action (button or icon), badge, input field, etc.

Input fields can show a tooltip on :focus as well as :hover. This can be used for fields that require some explanation without loading the page with text that doesn't get read, or requiring a hover over an icon that can get missed.

Usage

The tooltip can be positioned to the top, bottom, left, or right of the target element.

Technical Considerations

Cannot be used on an absolutely positioned element.
White space is preserved from the HTML (see the button example below).

The reason behind the second limitation is that an absolutely positioned element (the tooltip, in this case) won't get wider than its container by default, you'll have to give it a fixed width to do that. Since there's no one fixed width that will work for all tooltip variations, we trade off the default white space behaviour for flexible tooltip width.

There is no detection for window or container visibility. Position the tooltip such that it will not be cut off.

Hover over the elements below to see tooltip examples.

Pending

Text Link

Field Label

<p class="wv-text">Hover over the elements below to see tooltip examples.</p>

<span class="wv-badge--warning wv-tooltip__target">
  Pending
  <span class="wv-tooltip--top">Your application is pending approval.</span>
</span>

<hr class="docs-whitespace" />

<a class="wv-text wv-text--link wv-tooltip__target">
  Text Link
  <span class="wv-tooltip--bottom">If you want the text to wrap, insert
  a new line in the HTML.</span>
</a>

<hr class="docs-whitespace" />

<button class="wv-button--submit wv-tooltip__target">
  Button
  <span class="wv-tooltip--left">If you want the text to wrap, insert
  a new line in the HTML.</span>
</button>

<hr class="docs-whitespace" />

<i class="wv-icon--help wv-tooltip__target">
  <span class="wv-tooltip--right">This is some more information.</span>
</i>

<hr class="docs-whitespace" />

<!-- Form input with tooltip on :focus -->
<div class="wv-form-field">
  <label class="wv-form-field__label">Field Label</label>
  <div class="wv-form-field__element">
    <span class="wv-tooltip__target">
      <input class="wv-input" type="text" />
      <span class="wv-tooltip--top">This is some more information.</span>
    </span>
  </div>
</div>