8

I saw once a javascript tool (jquery plugin maybe) to implement feature/guide tour functionality, unfortunately i haven't bookmarked the page.

It used an overlay and focused on document elements, based on id attributes probably.

enter image description here

Joyride or anything i have found googling does not support this.

Do you have anything in mind?

tsiokos
  • 1,090
  • 2
  • 10
  • 21
  • 1
    You should consider to use Sideshow, look this comment: http://stackoverflow.com/questions/14170855/javascript-tool-for-single-page-applications-guided-tour/21298430#21298430 – Alberto Monteiro Dec 17 '14 at 15:50

4 Answers4

5

Sideshow is a modern and powerful library for creating interactive tours for web applications and sites.

More than just guiding your users, Sideshow can interact with them:

  • Highlight the part you're talking about in each step (a form, div, image, field, and so forth), by masking the rest of the screen (Sideshow doesn't use the z-index approach for this, its mask isn't positionated behind the element, but really surrounds it).
  • Monitor your user's behavior and the state of some screen.
  • Create smart steps for your tutorials, which proceeds automatically when some condition is satisfied
  • Create relationships between your tutorials, this way, when your user finishes some tutorial, a list with the related tours is shown.
  • Use Markdown for rich formatting a step description
  • Use events (e.g. beforeStep/afterStep, beforeWizardStarts/afterWizardEnds) to perform some preparation or anything else
  • Show contextual tutorials according to the screen being viewed by your user, each tutorial has its own conditions to check if it's eligible for that screen or not

And other powerful features!

Alcides Queiroz
  • 9,456
  • 3
  • 28
  • 43
  • 3
    I tried so many guide tour JS tools and I can confirm that this is the best one that I never found before, thank you! – Nizar B. Dec 16 '14 at 22:42
3

Intro.js is a Better introductions for websites and features with a step-by-step guide for your projects.

Features:

  • Keyboard + Mouse navigation
  • Fast & Small
  • Browser Compatibllity
  • Free & Open-Source
Islam Hossam
  • 31
  • 2
  • Note that it's no longer free and open source for commercial use though. https://stackoverflow.com/questions/36158360/intro-js-is-opensource-or-not https://introjs.com/#commercial – SharpC May 02 '19 at 09:50
0

jquerypowertour.com can highlight elements and a lot more. I have not used it, but it seems pretty powerful.

But I think something like the JoyRide or Guiders-JS could easily be modified to do in combination with jQuery Highlighter plugin - Demo

Mark
  • 473
  • 6
  • 7
  • 2
    This is not a free solution, Sideshow have the same features and are very easier to use. It's a free tool. – Nizar B. Dec 17 '14 at 10:11
0

At this point in time, I would most likely choose Shepherd for this purpose. (Intro and Sideshow would be close runners up, though.)

The code is clean, it has nice default styling that is easy to replace, the put care into making it accessible and giving it keyboard support, and it integrates with several frameworks:

  • React
  • Angular
  • Ember
  • Vue
  • Rails (through Abraham)
  • probably others that I don't know about

and of course it also works with vanilla JS or ES modules.

Also, it doesn't require jQuery. Everything that does require jQuery seems so 2005.

iconoclast
  • 21,213
  • 15
  • 102
  • 138