Use :mask="false" to make Tour non-modal. At the meantime it is recommended to use with type="primary" to emphasize the guide itself.
export function TourNonModal() { const [open, setOpen] = useState(false); return ( <> <ElButton type="primary" onClick={() => setOpen(true)}> Begin Tour </ElButton> <ElDivider /> <ElSpace> <ElButton id="tour-non-modal-1">Upload</ElButton> <ElButton id="tour-non-modal-2" type="primary">Save</ElButton> <ElButton id="tour-non-modal-3" icon={<MoreFilled />} /> </ElSpace> <ElTour visible={open} onVisibleChange={setOpen} type="primary" mask={false}> <ElTourStep target={targetBy("#tour-non-modal-1")} title="Upload File" description="Put you files here." /> <ElTourStep target={targetBy("#tour-non-modal-2")} title="Save" description="Save your changes" /> <ElTourStep target={targetBy("#tour-non-modal-3")} title="Other Actions" description="Click to see other" /> </ElTour> </> );}
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.
export function TourPlacement() { const [open, setOpen] = useState(false); return ( <> <ElButton id="tour-placement-trigger" type="primary" onClick={() => setOpen(true)} > Begin Tour </ElButton> <ElTour visible={open} onVisibleChange={setOpen}> <ElTourStep title="Center" description="Displayed in the center of screen." /> <ElTourStep title="Right" description="On the right of target." placement="right" target={targetBy("#tour-placement-trigger")} /> <ElTourStep title="Top" description="On the top of target." placement="top" target={targetBy("#tour-placement-trigger")} /> </ElTour> </> );}
export function TourIndicator() { const [open, setOpen] = useState(false); return ( <> <ElButton type="primary" onClick={() => setOpen(true)}> Begin Tour </ElButton> <ElDivider /> <ElSpace> <ElButton id="tour-indicator-1">Upload</ElButton> <ElButton id="tour-indicator-2" type="primary">Save</ElButton> <ElButton id="tour-indicator-3" icon={<MoreFilled />} /> </ElSpace> <ElTour visible={open} onVisibleChange={setOpen} indicators={({ current, total }) => ( <span> {current + 1} / {total} </span> )} > <ElTourStep target={targetBy("#tour-indicator-1")} title="Upload File" description="Put you files here." /> <ElTourStep target={targetBy("#tour-indicator-2")} title="Save" description="Save your changes" /> <ElTourStep target={targetBy("#tour-indicator-3")} title="Other Actions" description="Click to see other" /> </ElTour> </> );}
Target
Various parameter passing types of target. The string and Function types are supported since 2.5.2.
export function TourTarget() { const [open, setOpen] = useState(false); return ( <> <ElButton type="primary" onClick={() => setOpen(true)}> Begin Tour </ElButton> <ElDivider /> <ElSpace> <ElButton id="tour-target-1">Upload</ElButton> <ElButton id="tour-target-2" type="primary">Save</ElButton> <ElButton id="tour-target-3" icon={<MoreFilled />} /> </ElSpace> <ElTour visible={open} onVisibleChange={setOpen}> <ElTourStep target="#tour-target-1" title="Upload File" description="Put you files here." /> <ElTourStep target={targetBy("#tour-target-2")} title="Save" description="Save your changes" /> <ElTourStep target={() => document.querySelector<HTMLElement>("#tour-target-3")} title="Other Actions" description="Click to see other" /> </ElTour> </> );}
Tour API
TIP
tour-step component configuration with the same name has higher priority
Tour Attributes
Property
Description
Type
Default
append-to
which element the TourContent appends to
CSSSelector / HTMLElement
body
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
gap
transparent gap between mask and target
TourGap
Object
type
type, affects the background color and text color
default | primary
default
model-value / v-model
open tour
boolean
false
current / v-model:current
what is the current step
number
0
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
Type
default
tourStep component list
—
indicators
custom indicator
object
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 API
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
—
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
—
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
