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.
Updated: Oct 16th, 2020 (screenshot)
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.
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)
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.
This section provides guidance for keyboard, screen reader and pointing devices.
Please refer to the flyout pattern for all inherited keyboard interactions.
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.
Please refer to the flyout pattern for all inherited pointer interactions.
This section is not yet available.