Tour

A popup component for guiding users through a product.

Importimport{ Tour }from"antd";

Sourcecomponents/tour

Docs

Edit this page Changelog

Versionsupported since 5.0.0

When To Use

Use when you want to guide users through a product.

Examples

Basic

The most basic usage.

Placement

Change the placement of the guide relative to the target, there are 12 placements available. When target={null} the guide will show in the center.

Custom indicator

Custom indicator.

Custom mask style

Custom mask style.

Radius:

offset:

Horizontal offset:

Vertical offset:

Custom highlighted area style

Using gap to control the radius of highlight area and the offset between highlight area and the element.

Setting offset in two directions individually and offset with array type is not supported until 5.9.0.

API

Common props ref：Common props

Tour

Property	Description	Type	Default	Version
arrow	Whether to show the arrow, including the configuration whether to point to the center of the element	`boolean`\|`{ pointAtCenter: boolean}`	`true`
closeIcon	Customize close icon	`React.ReactNode`	`true`	5.9.0
disabledInteraction	Disable interaction on highlighted area.	`boolean`	`false`	5.13.0
gap	Control the radius of the highlighted area and the offset between highlighted area and the element.	`{ offset?: number \| [number, number]; radius?: number }`	`{ offset?: 6 ; radius?: 2 }`	5.0.0 (array type `offset`: 5.9.0)
placement	Position of the guide card relative to the target element	`center` `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight`	`bottom`
onClose	Callback function on shutdown	`Function`	-
mask	Whether to enable masking, change mask style and fill color by pass custom props	`boolean \| { style?: React.CSSProperties; color?: string; }`	`true`
type	Type, affects the background color and text color	`default` `primary`	`default`
open	Open tour	`boolean`	-
onChange	Callback when the step changes. Current is the previous step	`(current: number) => void`	-
current	What is the current step	`number`	-
scrollIntoViewOptions	support pass custom scrollIntoView options	`boolean \| ScrollIntoViewOptions`	`true`	5.2.0
indicatorsRender	custom indicator	`(current: number, total: number) => ReactNode`	-	5.2.0
zIndex	Tour's zIndex	number	1001	5.3.0
getPopupContainer	Set the rendering node of Tour floating layer	`(node: HTMLElement) => HTMLElement`	body	5.12.0

TourStep

Property	Description	Type	Default	Version
target	Get the element the guide card points to. Empty makes it show in center of screen	`() => HTMLElement` \| `HTMLElement`	-
arrow	Whether to show the arrow, including the configuration whether to point to the center of the element	`boolean` `{ pointAtCenter: boolean}`	`true`
closeIcon	Customize close icon	`React.ReactNode`	`true`	5.9.0
cover	Displayed pictures or videos	`ReactNode`	-
title	title	`ReactNode`	-
description	description	`ReactNode`	-
placement	Position of the guide card relative to the target element	`center` `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight`	`bottom`
onClose	Callback function on shutdown	`Function`	-
mask	Whether to enable masking, change mask style and fill color by pass custom props, the default follows the `mask` property of Tour	`boolean \| { style?: React.CSSProperties; color?: string; }`	`true`
type	Type, affects the background color and text color	`default` `primary`	`default`
nextButtonProps	Properties of the Next button	`{ children: ReactNode; onClick: Function }`	-
prevButtonProps	Properties of the previous button	`{ children: ReactNode; onClick: Function }`	-
scrollIntoViewOptions	support pass custom scrollIntoView options, the default follows the `scrollIntoViewOptions` property of Tour	`boolean \| ScrollIntoViewOptions`	`true`	5.2.0

Design Token

Component TokenHow to use?

Token Name	Description	Type	Default Value
closeBtnSize	Close button size	number	22
primaryNextBtnHoverBg	Hover background color of next button in primary type	string	rgb(240,240,240)
primaryPrevBtnBg	Background color of previous button in primary type	string	rgba(255,255,255,0.15)
zIndexPopup	Tour popup z-index	number	1070

Global TokenHow to use?