eBay MIND Patterns
  • Introduction
  • Messaging
    • Alert Dialog
    • Confirm Dialog
    • File Preview Card
    • Form Validation
    • Inline Notice
    • Input Meter
    • Input Validation
    • Page Notice
    • Star Rating (static)
    • Time
    • Toast Dialog
    • Tourtip
  • Input
    • Button
    • Checkbox
    • Chips Combobox
    • Combobox
    • Date Picker
    • File Input
    • Input Dialog
    • Listbox
    • Listbox Button
    • Menu
    • Menu Button
    • Phone Input
    • Radio
    • Select
    • Star Rating (interactive)
    • Switch
    • Toggle Button
    • Toggle Button Group
  • Navigation
    • Breadcrumbs
    • Fake Menu Button
    • Fake Tabs
    • Link
    • Pagination
    • Skip Navigation
    • Tile
  • Disclosure
    • Accordion
    • Carousel
    • Lightbox Dialog
    • Details
    • Flyout
    • Footnote
    • Infotip Button
    • Panel Dialog
    • Pulldown List
    • Segmented Buttons
    • Tabs
    • Tooltip
  • Structure
    • Description List
    • Form
    • Heading
    • Image
    • Item Tile
    • Layout Grid
    • Region
    • Table
    • Table Cell
  • Techniques
    • Active Descendant
    • Ambiguous Label
    • Background Icon
    • Keyboard Trap
    • Live Region
    • Offscreen Text
    • Roving Tabindex
    • Skip to Main Content
    • Alternative Text
  • Anti-Patterns
    • Disabling Pinch-to-Zoom
    • Hand Cursor on Buttons
    • JavaScript HREF
    • Layout Table
    • Mouse Hover on Static Elements
    • Open New Window
    • Setting Focus on Page Load
    • Tabindex-itis
    • Title Tooltip
  • Appendix
    • ARIA Essentials
    • Checklist
    • FAQ
    • Keyboard Interface
    • Known Issues
    • Legacy Patterns
      • Fullscreen Dialog
    • MIND Pattern Template
    • Pattern Naming Scheme
    • References
    • Utilities
Powered by GitBook
On this page
  • Introduction
  • Working Examples
  • Terminology
  • Best Practices
  • Interaction Design
  • Developer Guide
  1. Messaging

Tourtip

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

PreviousToast DialogNextInput

Last updated 3 months ago

Introduction

Tourtip is a system-activated . 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.

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.

Interaction Design

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

Keyboard

Screen Reader

If high-priority, tourtip must be announced.

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

Pointer

Developer Guide

This section is not yet available.

Examine the required markup structure within our .

View a fully style examples on our .

Please refer to the pattern for all inherited best practices.

Please refer to the pattern for all inherited keyboard interactions.

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

Please refer to the pattern for all inherited pointer interactions.

Bones GitHub project
eBay Skin website
flyout
flyout
flyout
flyout
flyout
Tourtip next to a filter action button