Tourtip

Informs the user of some new feature or section on the page.

Tourtip next to a filter action button

Introduction

Tourtip is a system-activated flyout. The purpose of the tourtip is to inform the user of some new feature or section on the page.

A tourtip is open by default and must be explicitly closed by the user. Once closed, it cannot be reopened.

Working Examples

A tourtip example is in progress. Check back again soon.

Examine the required markup structure within our Bones GitHub project.

View a fully style examples on our eBay Skin website.

Terminology

tourtip: the composite pattern as a whole, containing the following sub-parts

host: the element that hosts the tourtip

overlay: the non-modal overlay that contains the content related to it's host

tip: the tip content

expanded: the overlay state (true or false)

Best Practices

Overlay must contain a button to dismiss the tourtip.

Overlay must remain on screen until explicitly dismissed by user.

Overlay cannot be opened once closed without a full page refresh.

Please refer to the flyout pattern for all inherited best practices.

Interaction Design

This section provides guidance for keyboard, screen reader and pointing devices.

Keyboard

Please refer to the flyout pattern for all inherited keyboard interactions.

Screen Reader

If high-priority, tourtip must be announced.

If high-priority, tourtip must be listed as a region/landmark.

Please refer to the flyout pattern for all inherited screen reader interactions.

Pointer

Please refer to the flyout pattern for all inherited pointer interactions.

Developer Guide

This section is not yet available.