Create Guided Tours And Highlight Elements – Tooltip Sequence

Category: Javascript , Recommended | August 28, 2020
Views Total:1,596 views
Official Page:Go to website
Last Update:August 28, 2020


Create Guided Tours And Highlight Elements – Tooltip Sequence


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

  sequence: steps

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

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

You Might Be Interested In:

Leave a Reply