Create Guided Tours And Highlight Elements – Tooltip Sequence

Preview:

Description:

Yet another JavaScript guided tour library that creates step-by-step tooltips to walk visitors through your webpage and highlight matched DOM elements.

How to use it:

1. Install & Import.

# NPM
$ npm i tooltip-sequence --save

import createSequence from "tooltip-sequence";
import "tooltip-sequence/dist/index.css";

2. Or load the Tooltip Sequence’s JavaScript & CSS files from the dist folder.

<link rel="stylesheet" href="./dist/index.css" />
<script src="./dist/index.min.js"></script>

3. Attach sequential tooltips to target elements:

const steps = [
      {
        element: "#element-1",
        description: "Tour 1",
      },
      {
        element: "#element-2",
        description: "Tour 2",
      },
      {
        element: "#element-3",
        description: "Tour 3",
      }
],

4. Enable the guided tour.

createSequence({
  sequence: steps
});

5. Customize the welcome, confirm, and cancel text.

createSequence({
  sequence: steps,
  welcomeText: "Let us take you on a quick tour of the page!",
  confirmText: "Let's start",
  cancelText: "Maybe later"
});