Tours

Users need a guided overview of functionality that they may not be familiar with yet.

Description

• Tours can appear in the center of the screen or next to a related element
• Tours can contain text, forms, images, or videos
• Optional step indicators can be added to indicate where the user is within the tour
• An optional close (x) button can be added if the user is able to skip the tour
• The background can optionally be grayed out while highlighting a related element
• The Style Guide uses Hopscotch

Example

<button id="startTourBtn" type="button" class="btn btn-primary btn-lg">Start Tour</button>
<button id="startCalloutBtn" type="button" class="btn btn-default btn-lg">Callout Example</button>