Light

soorajsnblaze333 / tooltip-sequence Goto Github PK

View Code? Open in Web Editor NEW

306.0 5.0 19.0 2.55 MB

A simple step by step tooltip helper for any site

Home Page: https://tooltip-sequence.netlify.app/

License: MIT License

JavaScript 100.00%

javascript tooltip webdev helper utility tooltip-sequence popover hover info hint

tooltip-sequence's Introduction

Tooltip Sequence

A minimalistic set of tooltips on your app.

GitHub stars

GitHub forks

GitHub issues

size

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

tooltip-sequence's People

Contributors

Stargazers

Watchers

Forkers

praveenjuge jdiss yagiz-aydin ricardosaraiva wildmountainair halitguvenilir mehdiraized cybernetics stevealliance davidesforza dking3876 edcastaneda bronzwik wu1f72514 featihtr bluecommunitysustainability erisonliang blankitolv pierre3l

tooltip-sequence's Issues

Resizing the window does not align the focus area and the tooltip correctly

After loading the toolip, if the window is resized the focus area and the tooltip is not aligned correctly with the element.

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)

the tooltip footer row placed wrong

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>

Page with example

I think this project would definitly benefit from a quick and simple example page.
maybe using github static pages.

Cheers.

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.