TourGuide Icon TourGuide JS

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"




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


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.


// 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().