Easy Guided Tour Plugin For Bootstrap 5 – bs5-intro-tour

Preview:

Description:

An easy-to-use guided tour plugin for Bootstrap 5 that guides your visitors through a tour of your app.

How to use it:

1. Insert the stylesheet bs5-intro-tour.css and JavaScript bs5-intro-tour.js into your Bootstrap 5 page.

<!-- Bootstrap Framework -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.min.js"></script>
<!-- BS 5 Intro Tour -->
<link href="css/bs5-intro-tour.css" rel="stylesheet" />
<script src="js/bs5-intro-tour.js"></script>

2. Attach steps to elements within the document.

var steps = [
    {
      title: "Hello",
      content: "<p>Hello message</p>"
    }, {
      id: "step1",
      content: "<p>Step 1.</p>"
    },{
      id: "step2",
      content: "<p>Step 2.</p>"
    }, {
      id: "step3",
      content: "<p>Step 3.</p>"
    }, {
      id: "step4",
      content: "<p>Step 4.</p>"
    }
];

3. Initialize the plugin.

var tour = new Tour(steps);

4. Start the tour when needed.

tour.show();