Tour

A popup component for guiding users through a product.

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 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.

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.

Custom mask style

Custom mask style.

Custom action

Custom action.

Custom semantic dom styling

You can customize the semantic dom style of Tour by passing objects/functions through classNames and styles.

API

Tour are exported from @ceebee/ui/client.

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`	—
`classNames`	Customize class for each semantic structure inside the component. Supports object or function.	`Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>`	`-`	—
`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)
`keyboard`	Whether to enable keyboard shortcuts	`boolean`	`true`	6.2.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`	`-`	—
`onFinish`	Callback when the tour is finished	`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
`styles`	Customize inline style for each semantic structure inside the component. Supports object or function.	`Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>`	`-`	—
`indicatorsRender`	custom indicator	`(current: number, total: number) => ReactNode`	`-`	5.2.0
`actionsRender`	custom action	`(originNode: ReactNode, info: { current: number, total: number }) => ReactNode`	`-`	5.25.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