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 what kind of information the user is receiving.

Descriptive tooltip

A descriptive tooltip clarifies a UI element that lacks a visible label.

Examples:


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

Info tooltip

An info tooltip defines terms or provides secondary details users might need without requiring them to navigate away.

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

A single-step tourtip introduces a new feature or announces a single, time-sensitive 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

A multi-step tourtip is used when a feature is complex enough to require more than one step to explain.

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”.