Skip to main contenteBay Playbook

Tip overview

Tooltips and tourtips are the two tip types that surface contextual information anchored to a UI element. They serve different goals and audiences.

Tip types

Tooltip

Tooltips reveal a label or additional information when a user interacts with a UI element. They are explicitly triggered and persist until dismissed.

Tooltips follow two semantic messaging structures:


  • Descriptive 
  • Info
Examples of a descriptive tooltip and an info tooltip. The desriptive tooltip reads “favorite this item”. The info tooltip is pointing to an info icon, with “pre-owned - excellent” as the title and “this item has been previously worn; however, it is in excellent condition. Any signs of wear should be shown and described in the seller’s listing” as the body.

Tourtip

Tourtips are implicitly triggered and temporary. Use them sparingly, only when an interactive guide is needed to explain new or complex features.

Tourtips follow two semantic messaging structures:


  • Single-step 
  • Multi-step
Examples of a single-step tourtip and a multi-step tourtip. The single-step tourtip has the a title of “Authenticity Guarantee” with an icon and “use this filter to see items that are authenticated by eBay. Learn more” as the body.The multi-step tourtip has the a title of “automatic shipment groups” and a body of “we recommend shipments going to the same buyer and destination to save you money and time”. The footer shows “1 of 3” and a CTA of “next”.

Semantic messaging

All tips are semantic — the messaging structure you choose signals the nature and urgency of the information to the user.

Descriptive tooltip

Clarifies a UI element that doesn't have a clear label.

Examples:


  • Icon buttons without a text label
  • Abbreviated or truncated UI text
  • Datapoint on a graph
A cursor hovers over an icon button, which displays a tooltip labeled ‘Customize’ situated above the icon.

Info tooltip

Provides secondary, helpful context such as jargon or technical terms, without requiring users to leave their current page.

Examples:


  • Jargon or technical terms
  • Secondary details about a feature or setting
A cursor hovers over an information button, which displays a tooltip with a title of “Pre-owned - Excellent” and a subhead of “This item has been previously worn; however, it is in excellent condition. Any signs of wear should be shown and described in the seller’s listing.”

Single-step tourtips

Introduces a new feature or communicate a timely, one-off update.

Examples:


  • New filter or sort option
  • Limited-time promotion or program update
A single-step tourtip under a filter button with the Authenticity Guarantee icon and a title of “Authenticity Guarantee” and a subhead of “Use this filter to see items that are authenticated by eBay. Learn more”.

Multi-step tourtips

When a feature or update is complex and requires more than one piece of context to understand. Each step communicates only one idea or action.

Examples:


  • Onboarding to a multi-part workflow
  • Explaining a new, complex feature with several components
A multi-step tourtip under a “Ready to ship” button. The title reads “Automatic shipment groups”. The subhead is “We recommend shipments going to the same buyer and destination to save you money and time.” The sequence index is “1 of 2” and button is “Next”. A second tourtip under “Shipment overdue” is present. The title reads “Manage shipments”. The subhead is “Select one or more shipments to buy labels, add tracking in bulk, and more.” The sequence index is “2 of 2” and button is “Got it”.