FEC Pattern Library

Tooltips

Tooltips contain contextual annotations or helper text on demand when a user hovers or focuses on an element, usually in informational icon.

When to use

  • When a setting or control is highly specific to the FEC’s unique subject matter or context
    Ex: The “Restrict contributions” filter

When to consider something else

  • If users needs to refer back to the content frequently, or the content is critical to understanding functionality or context, consider making the annotation part of the constant interface

Guidance

  • Keep the content short and direct
  • Tooltip content should not contain instructions for how to use an interface. If you find yourself writing copy that explains how to use the interface, evaluate whether you have actually solved the original design problem in a user-centered way. Conduct usability testing to better understand the problems with the interface’s design.
<div class="slab">
    <div style="position:relative; display: inline-block; margin: 0 0 0 30rem">
        <button class="button button--cta button--export">Export</button>
        <div class="tooltip tooltip--right tooltip--under">
            <p class="tooltip__content">Explanatory content about this element</p>
        </div>
    </div>
</div>
 
<div class="slab">
  <div style="position:relative; display: inline-block; margin: 0 0 0 30rem">
    <button class="button button--cta button--export">Export</button>
    <div class="tooltip tooltip--right tooltip--under">
      <p class="tooltip__content">Explanatory content about this element</p>
    </div>
  </div>
</div>
 
/* No context defined. */