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

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`	—