Tour

A popup component for guiding users through a product. Use when you want to guide users through a product.

Basic usage

The most basic usage

Non modal

Use :mask="false" to make Tour non-modal. At the meantime it is recommended to use with type="primary" to emphasize the guide itself.

Placement

Change the placement of the guide relative to the target, there are 12 placements available. When target is empty the guide will show in the center.

Custom mask style

Custom mask style.

Custom indicator

Custom indicator.

Target

Various parameter passing types of target. The string and Function types are supported since 2.5.2.

Tour API

TIP

tour-step component configuration with the same name has higher priority

Tour Attributes

Property Description Type Default
show-arrow whether to show the arrow boolean true
placement position of the guide card relative to the target element enum bottom
content-style custom style for content CSSProperties
mask whether to enable masking, change mask style and fill color by pass custom props boolean | Object true
type type, affects the background color and text color default | primary default
model-value / v-model open tour boolean
current / v-model:current what is the current step number
scroll-into-view-options support pass custom scrollIntoView options boolean | ScrollIntoViewOptions Object
z-index Tour's zIndex number 2001
show-close whether to show a close button boolean true
close-icon custom close icon, default is Close string | Component
close-on-press-escape whether the Dialog can be closed by pressing ESC boolean true
target-area-clickable whether the target element can be clickable, when using mask boolean true

Tour slots

Name Description
default tourStep component list
indicators custom indicator, The scope parameter is { current, total }

Tour events

Name Description Type
close callback function on shutdown Function
finish callback function on finished Function
change callback when the step changes Function

TourStep Attributes

Property Description Type Default
target get the element the guide card points to. Empty makes it show in center of screen. the string and Function types are supported since 2.5.2. the string type is selectors of document.querySelector. HTMLElement | string | Function
show-arrow whether to show the arrow boolean true
title title string
description description string
placement position of the guide card relative to the target element enum bottom
content-style custom style for content CSSProperties
mask whether to enable masking, change mask style and fill color by pass custom props boolean | Object true
type type, affects the background color and text color default | primary default
next-button-props properties of the Next button Object
prev-button-props properties of the previous button Object
scroll-into-view-options support pass custom scrollIntoView options, the default follows the scrollIntoViewOptions property of Tour boolean | ScrollIntoViewOptions
show-close whether to show a close button boolean true
close-icon custom close icon, default is Close string | Component

TourStep slots

Name Description
default description
header header

TourStep events

Name Description Arguments
close callback function on shutdown Function

Source

Component Style Docs

Contributors