Tooltips

Tooltips display a small amount of information upon click or tap. Its content is informational text only.
See also: Layers vs modals vs tooltips

Also known as: tool tip, info tip

Example

See the Pen Tooltips by SHC-FED (@SHC-FED) on CodePen.0

Design Specs

  • Sears
  • Kmart

Desktop/Tablet

  1. Tooltips have a 1px stroke color, #666 and there is no shadow
  2. The close ‘x’ must be top aligned with the text or title in the tooltip. The ‘x’ is from the SHC font library, size 13px and #66666. There should be a 44px touch area around the close ‘x’ affordance.
  3. There is 20px of padding between the edge of the tooltip and the content. When a title is present, there should be 20px of padding between the bottom of the title and body copy.
  4. A headline or title is optional, but when present should be Open Sans Semibold, 15px and #001733.
  5. Body copy follows secondary title (T6) guidelines - 13px with a line height of 20 px, Open Sans Regular, #001733.

    Not shown:
  1. Character count is not to exceed 360 characters and text should be informational only.
  2. Opened by a click/tap (only)
  3. Close ‘x’ is required
  4. Title is optional, when used should be T5 styling
  5. Caret placement dependent on trigger position and should point to the link that activates the tooltip
  6. Width of the tooltip is flexible based on line length, but cannot exceed a max width of 380px.
  7. Height of the tooltip is variable based on content.
Note: Design specs are for reference only. Developers should implement patterns using the Enterprise Framework whenever possible - see the Example section on this page.

Desktop/Tablet

  1. Tooltips have a 1px stroke color, #666 and there is no shadow
  2. The close ‘x’ must be top aligned with the text or title in the tooltip. The ‘x’ is from the SHC font library, size 13px and #66666. There should be a 44px touch area around the close ‘x’ affordance.
  3. There is 20px of padding between the edge of the tooltip and the content. When a title is present, there should be 20px of padding between the bottom of the title and body copy.
  4. A headline or title is optional, but when present should be Helvetica Bold, 15px and #333.
  5. Body copy follows secondary title (T6) guidelines - 13px with a line height of 20 px, Helvetica Regular, #333.

    Not shown:
  1. Character count is not to exceed 360 characters and text should be informational only.
  2. Opened by a click/tap (only)
  3. Close ‘x’ is required
  4. Title is optional, when used should be T5 styling
  5. Caret placement dependent on trigger position and should point to the link that activates the tooltip
  6. Width of the tooltip is flexible based on line length, but cannot exceed a max width of 380px.
  7. Height of the tooltip is variable based on content.
Note: Design specs are for reference only. Developers should implement patterns using the Enterprise Framework whenever possible - see the Example section on this page.

Production Examples

  • Sears
  • Kmart

Desktop/Tablet

Desktop/Tablet

When Do I Use This?

Use tooltips to provide more information about the associated content, while allowing the user to remain in their current context.

    Use when:
  • text is 360 characters or less
  • information is text only - no decisions, links, buttons or form elements
  • hints/tips/help i.e. with “?” or “i” icons are needed
  • not used on small devices (mWeb/app)
    DO NOT use Tool Tips when:
  • Text is of unknown length (e.g. legal text)
  • Navigation (e.g. links or buttons is needed)
  • Input (e.g. text fields, drop down lists) are required
  • Alerts/Errors/Confirmations, Notifications or dialogs are needed

See also: Layers vs modals vs tooltips

Usage Guidelines

1. Use for brief chunks of information

The tooltip element should be used when text is 360 characters or less AND is informational text only; no decisions or navigation (links, CTAs) should be included.

Tool tips are used for quick detail about a piece of content

Tool tips not are not designed for reading high character count. This example exceeds viewport.

Tool tips not are not designed for reading high character count. Do not use scroll as a solution

2. Use for information only

Tool tips are used for informational text only.

Do not include links or decisions in tooltips.

ADA Compliance

Tooltips need to be accessible for screen readers and people that only use the keyboard for navigation. When designing a tooltips window, the window should be the only thing the user can interact with on the current Web page. When a tooltips is displayed, the focus should be placed inside of the dialog so users can continue to navigate with the keyboard. Once the user tabs off of the tooltip, the tooltip window should close and allow for the user to continue to navigate the web page. Source: ARIA Accessibility

A tooltip window - when opened, focus should be set to the dialog so a screen reader will begin reading and the keyboard will begin navigating within the window. Because the window is not focusable by default, assigning it tabindex="-1" allows focus to be set to it with scripting when it is presented. Source: Web AIM - Keyboard Accessibility: Tab Index

Rationale

A tooltip displays a small info snippet (a tip, or hint) while allowing the user to remain in their current context. Moving secondary information to a child element/window provides a user clarity and focus on their primary task, while keeping supplemental information / detail readily accessible without linking away.

    SHC version design rationale:
  • This content is always secondary, so we use secondary font size.
  • Size: An audit of existing usage drove 360 character threshold between Layers and tooltip. At secondary font size, a tooltip stays on one screen (height) AND optimized for 50-60 char/line (width)
  • Open on click, no hover: due to touch. If able to be coded, hover to open & close is ok but tap must work as well.
  • Close X size matches font size of title. Making it a touch-friendly size itself would look odd; we've solved for this with padding. Note: tooltips must be coded to take advantage of the 44 px real estate around the X for touch-friendly hit area.
  • Title is optional because the caret directly relates the content to the element; title not required. At very low character counts, the title would be duplicative of body copy.
  • Links and CTAs/Buttons are prohibited because it undermines the fundamentals of what this element is: information.
If links are needed, use the Layers pattern.

Research

Sears.com on Tablets: Key Considerations

"Small target areas are especially troublesome for pop-ups and fly-outs...Ensure ample space around targets for tablet users, and ensure layers perform as expected with touch interactions." See Page 6

view full study

Comments

  1. border color in graphic examples, PSD, and Adobe CC Library (#aaa) does not match CodePen border color (#666)

Post a New Comment

Your feedback will help us improve this page. If you have a comment about the content of this page, use the form below, and the Patterns Team will get back to you within a business day.

For general questions or assistance, email the Patterns Team directly.