Tool Tips
Last updated: October 1, 2015 at 13:24 pm

Small instructional containers which are displayed by clicking or rollover.

Visual example of the element:

What problem does this element or pattern solve?
Tool tips are small containers of text which appear whenever an object might benefit from a short written description. Tool tip copy is normally a short verbal phrase that provides a brief instruction or clarification. Historically, tool tips appear whenever the mouse is hovered over a specific area, but touch devices have recently introduced changes to this interaction, requiring more detailed definitions.
It applies to these platforms:

Desktop Web, Tablet Web, Smartphone Web

An example of this element or pattern in production:

Detailed specifications

Specifications To Consider

  • Because of the potential for overuse, carefully define the rules for implementing tool tips. Tool tips should never be a crutch to compensate for poor usability nor ambiguous content.
  • Define the presentation of tool tips. Do they display when a user hovers over the trigger or do they require a click? How is “display on hover” handled on touch devices?
  • How will your tool tips close? Are they timed to automatically disappear? Do they vanish on roll-out? Again, how is this handled on touch devices?
  • Do they include a small visual affordance (trigger) to alert the user that a tool tip is available?
  • Can they be triggered by a text link alone? If yes, how does this link differ visually from a traditional text link?
  • Is there a limit to the amount or type of content that can be presented within them? Can you have scroll bars within a tool tip?
  • How will the expanded content area be positioned on the screen in relation to the trigger? Does the expanded area always extend toward the center of the screen regardless of the position of the trigger?
  • Fully define the visual styling of the tool tip container and fonts—color, borders, shape, shadows, font sizes, alignment, etc.

Location of assets to build this element or pattern
Location of UX or visual design assets
Location of development code repository

Additional details
Information on research, user testing, or usability reports:

Not Applicable (Remember: no field should be blank!)

This element or pattern may also be known as:
tooltip, pop-up, pop-over, help bubble, speech bubble, message balloon, help balloon, tip balloon, infotip, hoverbox, hover box
Related elements within this Style Framework:

Not Applicable (Remember: no field should be blank!)

Owners and governance
UX or design 0wner
John Designowner
Business or marketing owner
Mary Businessowner
Development owner
Mike Devowner

Other information
Please include any other relevant information about this element or pattern:
Not Applicable (Remember: no field should be blank!)

Comments & Questions

Leave a Reply