tour.tour.tour-example.yml

# This file defines the tour for our example page. There should be one tour
# file for each tour that you create. These tour files should be placed in a
# module's 'config' folder and named using the pattern
# 'tour.tour.{tour-id}.yml'.
#
# Each tour file has two parts: 1) The tour properties, and 2) the tip
# definitions.
#
#
# TOUR PROPERTIES
#
# The tour properties define information that applies to the tour as a whole.
# Properties that you can define for your tours include the following:
#
#   id:         Each tour should have a unique ID. This id is used in the
#               filename and appears as an ID in the HTML.
#   module:     The machine name of the module containing your tour.
#   label:      A human readable name for the tour.
#   status:     A boolean, defining whether the tour is enabled.
#   langcode:   A two-letter language code defining the language of your tour.
#   routes:     An array of routes for which the tour is active. Specify these
#               as an array with route_name and optional route_params (also an
#               array). Route names are found in each module's routing.yml file.
#
#
# TIP DEFINITIONS
#
# Here, you define each tip that you want to appear in your tour. Each of
# the tips have properties that must be defined, including the following:
#
#   id:         Each tip needs a unique ID. This appears as an ID in the HTML.
#   plugin:     The Tour API uses plugins for defining different types of
#               tips. The 'text' plugin (for making text tooltips) is provided
#               in core, but developers can define additional plugins for tips
#               containing images, video, or other interactions.
#   label:      The lable for the tip. This will be rendered in an h3 element.
#   body:       The body of the tip. HTML markup is allowed.
#   weight:     Tips within a tour are ordered by weight, beginning with the
#               lowest number. Negative values are acceptable.
#   position:   Defines the position of the tip, relative to its target.
#               Acceptable values include: 'auto', 'auto-start', 'auto-end', 
#               'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 
#               'bottom-end', 'right', 'right-start', 'right-end', 'left', 
#               'left-start', 'left-end'. Default: auto.
#   selector:   The HTML element you want to attach the tip to.  You can use 
#               classes (.class-name), ID's (#id-name), a combination of both, 
#               and even complex elements like (.action-links 
#               a[href="/admin/structure/forum/add/forum"])
#
#               If you omit, the tip will be shown as modal instead of being 
#               targeted to an element.
#
id: tour-example
module: tour_example
label: 'Tour an example admin page'
langcode: en
routes:
  - route_name: tour_example.description
tips:
  introduction:
    id: introduction
    plugin: text
    label: 'Introduction'
    body: 'This is an example tour. Click "next" to continue through the tour.'
    weight: 1
  first-item:
    id: first-item
    plugin: text
    label: 'First Item'
    body: 'Tours are helpful for walking users through an unfamiliar admin interface.'
    weight: 2
    position: bottom
    selector: '#tour-target-1'
  second-item:
    id: second-item
    plugin: text
    label: 'Second Item'
    body: 'Individual tips can be positioned anywhere on the page.'
    weight: 3
    position: top
    selector: '#tour-target-2'
  third-item:
    id: third-item
    plugin: text
    label: 'Third Item'
    body: 'You can click the X in the top right corner of this box to close the tour at any time.'
    weight: 4
    position: bottom
    selector: '#tour-target-3'
  fourth-item:
    id: fourth-item
    plugin: text
    label: 'Fourth Item'
    body: 'When the tour is over, click "End Tour".'
    weight: 5
    position: left
    selector: '#tour-target-4'