ProductTour

ProductTour displays a sequence of checkpoints with anchors around the DOM. A ProductTour takes a list of tour objects and will only support one enabled tour at a time. If multiple tours are enabled, ProductTour will only render the first enabled in the tours list.

Checkpoints are rendered in the order they're listed in the checkpoint array. The checkpoint objects themselves have additional props that can override the props defined in ProductTour.

Basic Usage#

// Checkpoints

$checkpoint-background-color:       $light-300 !default;

$checkpoint-body-color:             $gray-700;

$checkpoint-border-color:           $brand !default;
$checkpoint-border-width:           8px !default;

$checkpoint-breadcrumb-color:       $primary !default;

$checkpoint-arrow-width:            15px !default;
$checkpoint-max-width:              480px !default;

$checkpoint-z-index:                1060 !default;