How to Create Guided Tours and Highlight Elements | Tooltip Sequence

Tooltip Sequence – Create a web application and want to take users or anyone on a detailed tour of one or two or maybe all of the features in your app, you can install this simple Javascript package to create a series of small tooltips that will direct the user to each of them and show a small description of what you want them to know about that feature.

website guided tour plugin, website guided tour examples, website guided tour tool, jquery tour plugin, guided tour tooltip

How to make use of it:

1. Install & Import.

# NPM
$ npm i tooltip-sequence --save
import createSequence from "tooltip-sequence";
import "tooltip-sequence/dist/index.css";

2. Load the Tooltip Sequence’s JavaScript & CSS information from the dist folder.

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

3. Attach sequential tooltips to focus on components:

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, verify, 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"
});

Create Guided Highlight Elements, Feature Tour Plugins, Highlight Element in Javascript


See Demo And Download

Official Website(SoorajSNBlaze333): Click Here

This superior jQuery/javascript plugin is developed by SoorajSNBlaze333. For extra Advanced Usage, please go to the official website.

Share