80

Is there a system/framework in existence which focuses on providing tutorial / help like overlays in the browser?

Example: You have a webapp which requires a certain level of instruction to the user. In this instruction process you wish to "highlight" (e.g. arrow, colour shading, pulsing border, etc) a certain element on the page, with an accompanied message.

This would be a true overlay, so it would function only in absolute positioning, and not interfere with the existing layout.

I'm looking for an existing solution, before I consider rolling my own.

Spot
  • 7,962
  • 9
  • 46
  • 55

2 Answers2

188

Thanks to Johnson for giving me a good term to Google with (sans ridiculous false positives).

Here is a list of "feature tour" solutions I've found:

I'm sure there are more out there. These solutions can make it far easier for a developer to implement better feature introductions to users.

Shankar ARUL
  • 12,642
  • 11
  • 68
  • 69
Spot
  • 7,962
  • 9
  • 46
  • 55
  • 6
    Some other google-foo words are Instructional Overlay and Coach Marks. – Frank Phillips Jun 11 '14 at 23:42
  • 2
    Another one to add to the list: [Trip.js](http://eragonj.github.io/Trip.js/) – llernestal May 11 '15 at 13:29
  • 19
    Serious +1. This is why closing questions asking for a library that can do something is so annoying... – awidgery May 22 '15 at 13:11
  • 1
    also https://github.com/heelhook/chardin.js – Josh.F Nov 05 '15 at 01:41
  • 3
    http://bootstraptour.com – Dragonborn Nov 10 '16 at 12:43
  • Note to anyone else who might stumble across this: Joyride is really easy to use but only if you don't download the version that is linked from the homepage, because it doesn't correspond to the instructions on the page. Instead go to their github and grab the v2.1.0 release, which also contains working demo code. The "latest" version, which seems to be mistakenly labelled 2.0.0, has been heavily refactored and doesn't come with any demo or documentation, so I couldn't make head or tail of it. – Daniel Hume May 18 '18 at 07:48
  • Most of these don't work on mobile or are depreciated/not maintained. How do all the big companies get attractive instructional/walkthroughs? – Nick Steele Jul 31 '18 at 15:27
  • Add another one I helped wrote: https://github.com/svkangal/ember-tutorial-component, it's an ember-addon and built for Ember though. – Alan Dong Sep 05 '18 at 20:23
  • The best one is intro.js. It got beautiful design. – Dexter Dec 03 '18 at 14:55
  • say, if i implement this in my login systems like ERP and i give the user a tour, Once the user through with the tutorial how do i stop showing again. What if i want only once. – Dexter Dec 03 '18 at 15:01
13

More into addition of the list we can use lightweight library https://github.com/heelhook/chardin.js

Harshal Patel
  • 161
  • 1
  • 7