> For the complete documentation index, see [llms.txt](https://ebay.gitbook.io/mindpatterns/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ebay.gitbook.io/mindpatterns/messaging/tourtip.md).

# Tourtip

![Tourtip next to a filter action button](/files/-MJmthm7eIxDpaHb3wBF)

### Introduction

Tourtip is a system-activated [popover](/mindpatterns/disclosure/popover.md). 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](https://github.com/ianmcburnie/bones#tourtip).

View a fully style examples on our [eBay Skin website](https://opensource.ebay.com/skin/component/tourtip/).

### 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 [popover](/mindpatterns/disclosure/popover.md) pattern for all inherited best practices.

### Interaction Design

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

#### Keyboard

Please refer to the popover 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 popover pattern for all inherited screen reader interactions.

#### Pointer

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

### Developer Guide

This section is not yet available.