Docs

Tour steps

Define the tour steps and focus elements.

Tip: Tour steps are evaluated on tourStart() and refresh()

Data attribute method

TourGuide JS will scan the DOM for elements with the [data-tg-tour] attribute.

The "data-tg-tour" attribute should contain the relevant content for the tour guide step. For example:


                <div data-tg-tour="Welcome to the tour"> ... </div>

Additional attributes are supported:

data-tg-title : Title to show for step
data-tg-group : Group for different tours on the same page
data-tg-order : The order of the step
data-tg-fixed : If the element is fixed on scroll
data-tg-margin : Auto scroll margin from screen edge


                <div data-tg-tour="Welcome to the tour"
                data-tg-title="Get started"
                data-tg-group="my-first-tour"
                data-tg-scroll-margin="0"
                data-tg-fixed
                > ... </div>

TourStep Array method

Steps can also be defined in an object format. This allows for more control and customization.

The tour step object : Type: TourStep


                {
                content: string
                title?: string
                target?: HTMLElement | Element | HTMLInputElement | string | undefined
                order?: number
                group?: string
                }

When when working with object defined steps they must be contained in an array. If steps are not contained in array & debug is enabled in options a console warning will be displayed.


                    tg.addSteps([{
                    // step data..
                    ])

The target property

While other elements of the TourStep object are straight forwards, the target supports multiple types.

undefined or element not found : The tour dialog will be centered on screen.
string : Find element using document.querySelector()
HTMLElement | Element | HTMLInputElement : JS element

Defining steps on Tour Guide creation.


                const steps = [{
                content: "This is a short guide to get you set up and show you where things are"
                title: "Welcome aboard 👋"
                target: ""
                order: ""
                group: ""
                }])
                const tg = new TourGuideClient({
                steps: steps
                })

To add steps programmatically use addSteps().

Back

Usage

Options