Tour

Step-by-step guided tour that highlights target elements from a data-source, with keyboard navigation and custom button texts

Live preview

Open in new tab ↗
  • Supports keyboard arrows
  • Supports tab key
  • Supports esc key

IMPORTANT: Put this component on the bottom of the body element

Configuration:

  • escape {Boolean} toggle possibility to hide Tour with esc key (default: true)
  • skiptext {String} a text of the skip button (default: Skip)
  • nexttext {String} a text of the next button (default: Next)
  • backtext {String} a text of the back button (default: Back)
  • endtext {String} a text of the end button (default: End)
  • datasource {String} path to data-source
  • bghide {Number} toggle possibility to hide Tour by clicking on the background (default: false)
  • hide {String} path to method function(type) (type - 0: by PATH (e.g. null) 1: end button 2: skip button 3: esc key 4: click on bg)
// datasource
var example = [
    {
        target: '.test1',
        title: 'My title 1',
        text: 'Message 1'
    },
    {
        target: '.test2',
        title: 'My title 2',
        text: 'Message with offset',
        offsetY: 10
    }
];

PATH is the actual tour page

More UI components

Browse all 348