DEV Community

Sooraj (PS)
Sooraj (PS)

Posted on • Edited on

Tooltip-sequence v0.2.2 🔥

tooltip-sequence - A simple yet creative chain/sequence of tooltips to help guide users in your site.

So a couple of days ago I started off with this idea of creating a simple, yet creative solution for all the people who are finding it difficult to show certain actions on the web, without writing a big passage or documentation with a whole bunch of screenshots. This often seems to be meticulous or confusing for new users or for existing users who find it difficult to keep track of the changes in your app.
This plugin will help you solve that by focussing on what you want your users to see and guide them to it. The cool thing is that it is lightweight and has no dependencies to it. It can be used with ease and just by calling a simple function.

Some of the features in this plugin

  • Literally put anything in the tooltip description, text, html or emoji. Your can express your creativity through it.

Alt Text

  • Is Responsive on mobiles. You a want it to work on mobile sites also, no worries, it looks as good as on web on mobiles too.

Alt Text

Alt Text

  • Takes you to the element with focus. Hard to find something on the page, hidden long way below that you find it difficult to scroll into. No issues, each tooltip will take you to the corresponding element with focus.

  • Stop from any step. If you think you are clear in step 2 and want to skip the guide, you can literally stop it from anywhere.

  • Callback events (coming soon) - Suppose you want to do something when the element is focused. Say for example, you guide the user to a form, and you want to show them each element of the form and samples to type. So in each step in the event you could literally fill the form with sample values and when the user quits, you could refresh the form.

This plugin would be basically be doing the work of a tutorial but without someone spending the time and effort making a video or a documentation, but showing the user what needs to be done in a step by step way.

Thanks for reading this and if you like this plugin, please make sure to like this post and star my github repository. ❤️

Top comments (0)