A simple step by step tooltip helper for any site

Related tags

Learning resource javascript utility helper guide popover tooltip hover tour description info focus webdev hint intro tooltip-sequence
Overview

Tooltip Sequence

A minimalistic set of tooltips on your app.

GitHub stars GitHub forks GitHub issues size

cover

cover

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 = {
  backdropColor:"transparent || color-code",
  sequence:[{
    element:"#element",
    description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
    placement:"top || right || bottom || left"
  }],
  onComplete:function() {
    // your code
  }
};
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
You might also like...

A basic Svelte tooltip directive.

SVooltip A basic Svelte tooltip directive. Powered by Floating UI. Usage script import { tooltip } from 'svooltip'; import 'svooltip/svooltip.css'

Nov 26, 2022

Tooltip using only CSS and very low build size.

Tooltip using only CSS and very low build size.

css-only-tooltip A very lightweight tooltip utitlity library, made using only CSS with dynamic light and dark themes. Insatallation Using npm $ npm in

Dec 11, 2022

The JavaScript library let’s you transform native tooltip’s into customizable overlays.

iTooltip The JavaScript library let’s you transform native tooltip’s into customizable overlays. Use: script src="/path/to/iTooltip.js"/script sc

Dec 17, 2021

Shizuku Launcher is a simple AWS Virtual Machine helper.

shizuku-launcher-web Shizuku Launcher is a simple AWS Virtual Machine helper. Shizuku Launcher offers multiple solutions to keep your credential secur

Oct 11, 2022

Shizuku Launcher is a simple AWS Virtual Machine helper. Now in Next.js

Shizuku Launcher Shizuku Launcher is a simple AWS Virtual Machine helper. Shizuku Launcher offers multiple solutions to keep your credential security

Jan 3, 2023

Turn any dynamic website (especially wordpress) into a fast, secure, stable static site

Static site publisher Turn any dynamic website (especially wordpress) into a fast, secure, stable static site Reduced complexity - no need to run simp

Apr 6, 2022

How to implement Step-up Authentication using Amazon Cognito

How to implement Step-up Authentication using Amazon Cognito

How to implement Step-up Authentication using Amazon Cognito This repository contains accompanying source code for the AWS Blog post, How to implement

Dec 15, 2022

Multi-step wizard helpers for Alpine.js

Multi-step wizard helpers for Alpine.js

Alpine Wizard This package provides an Alpine directive (x-wizard) and a magic helper ($wizard) that allow you to quickly build multi-step wizards usi

Dec 23, 2022

AWS Step Functions Workflows Collection

AWS Step Functions Workflows Collection This repo contains Step Functions workflows that shows how to orchestrate multiple services into business-crit

Dec 25, 2022
Comments
  • the tooltip footer row placed wrong

    the tooltip footer row placed wrong

    image

    seems the tooltip footer row placed wrong. here is the code

    "../dist/index.js" is your package.

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>test tooltip sequence</title>
  <link rel="stylesheet"
    href="https://unpkg.com/tooltip-sequence@latest/dist/index.css">
  <style>
    #element {
      width: 200px;
      height: 200px;
      background-color: yellow;
    }
  </style>
</head>

<body>
  <div id="element">target element</div>
  <script src="../dist/index.js"></script>
  <script>
    const options = {
      backdropColor: "transparent || color-code",
      sequence: [{
        element: "#element",
        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
        placement: "bottom"
      }],
      onComplete: function () {
        // your code
      }
    };
    createSequence(options);
  </script>
</body>

</html>
    opened by ElsaOOo 3
  • After toolTip sequence close , The entire DOM not respond to events. [ANGULAR]

    After toolTip sequence close , The entire DOM not respond to events. [ANGULAR]

    Hi! , Im trying to integrate a little tutorial for a angular component , so i import all i need in my component and start creating a simple sequence . The problem start when the sequence finish . The entire dom behaves like there isnt event Listeners on my buttons and labels etc... In simple words , the page not respond to any action... I cant see any error on console log ...¿ Have they tested in angular? . Cheers ! Is a very usefull Tool for web tutorials! (Sorry for my english)

    opened by lusho99 3
Releases(1.0.4)
Owner
Sooraj Sivadasan Nair
MS@UHCL • Graduate Teaching Assistant • Webdev • Frontend • Javascript • ReactJS • NodeJS • Firebase • AngularJS • Svelte • Figma
Sooraj Sivadasan Nair
GitHub https://tooltip-sequence.netlify.app/
Full source-code for the step-by-step tutorial on how to use Phaser + Colyseus together.

Phaser: Real-time Multiplayer with Colyseus Full source-code for the step-by-step tutorial on how to use Phaser + Colyseus together. Live Demo See ste

Colyseus 19 Dec 24, 2022
A light-weight user's step-by-step guide for your website using Vanilla JS.

WebTour JS A light-weight user's step-by-step guide for your website using Vanilla JS. Features User's walkthrough - can be used to guide user's to yo

JM de Leon 23 Nov 21, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Um bot de suporte feito usando threads para o Discord, 100% customizável, feito em JavaScript e inspirado no Rio Helper do servidor Elixir Lab e na Loritta Helper do serivdor de suporte da Loritta.

Ticket Bot Um bot de suporte feito usando threads para o Discord, 100% customizável, feito em JavaScript e inspirado no Rio Helper do servidor Elixir

ADG 6 Dec 21, 2022
A crawler that crawls the site's internal links, fetching information of interest to any SEO specialist to perform appropriate analysis on the site.

Overview ?? It is a module that crawls sites and extracts basic information on any web page of interest to site owners in general, and SEO specialists

Yazan Zoghbi 2 Apr 22, 2022
A crawler that crawls the site's internal links, fetching information of interest to any SEO specialist to perform appropriate analysis on the site.

Overview ?? It is a module that crawls sites and extracts basic information on any web page of interest to site owners in general, and SEO specialists

Yazan Zoghbi 2 Apr 22, 2022
Simple pure CSS ToolTip

PureCSSToolTip Simple pure CSS ToolTip purecsstooltip.css is used to the added tooltip for a web app, web page without javascript. This full of CSS co

Gokul S 3 Sep 19, 2022
A lightweight tooltip plug-in library

popper-next 是一款轻量的 Tooltip 插件 vue、react安装使用 推荐yarn yarn add popper-next 或者 cnpm install popper-next -S 在html页面中如何使用 <script src="https://unpkg.com/pop

east-wzd 4 Dec 7, 2022