A simple step by step tooltip helper for any site

Tooltip Sequence

A minimalistic set of tooltips on your app.

What it does

So suppose you create a Web Application and you want to take your users or anyone on a walkthrough on one, two or maybe all the features in your app, you can install this simple Javascript package to create a sequence of small tooltips that will guide the user to each feature( in our case a web element ) and show a small description of what you want them to know about that feature.This package would save you the time to manually create tooltip descriptions on each page and link them together in action.

Installation

Quick Usage ⚡️

Add the following tags to your HTML document

<link rel="stylesheet" href="https://unpkg.com/tooltip-sequence@latest/dist/index.css">
<script src="https://unpkg.com/tooltip-sequence@latest/dist/index.min.js"></script>

Or

Use npm

npm install tooltip-sequence --save

Add the following statements to the file that uses the sequence

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

Example

const options = {
  welcomeText: "Let us take you on a quick tour of the page!",
  confirmText: "Let's start",
  cancelText: "Maybe later",
  sequence: [
    {
      element: "#brand-name",
      description: "This is the brand name of the App.",
    },
    {
      element: "#home-nav",
      description: "<h2>Click here to go to Home page. <div>Home Page</div></h2>",
    },
    {
      element: "#edit-profile",
      description: "📝 This is the edit profile button",
    },
  ],
};
createSequence(options);

Infinite Customizations available. You can customize any element that is created by overriding the classes. Customizations are only limited by the creativity of the designer

Checkout the features and a live demo here

Development

You need Hugo to run the dev server. If you have Homebrew you can do the following:

brew install hugo

Check this Hugo installation page for installing on other systems.

Then clone the repo, install dependencies, and start the server locally.

git clone https://github.com/SoorajSNBlaze333/tooltip-sequence.git
cd tooltip-sequence
npm i
npm start

Open http://localhost:1313 in your browser.

Scripts	Description
npm start	Starts a local dev server
npm run production	For generating production docs files

Download Details:

Author: SoorajSNBlaze333

Demo: https://tooltip-sequence.netlify.app/

Source Code: https://github.com/SoorajSNBlaze333/tooltip-sequence

#javascript