Website tour, instructions and help plugins

Intro.js

website+demo  github

– 10KB JavaScript and 2.5KB CSS
– user-friendly
– browser-compatibility
– hints, enable/disable, HTML in tooltip, floating guide, multi-page guide, progress bar, auto-positioning

2016-08-04 002

Angular Intro.js

github

Angular version of intro.js

Trip.js

website demos github

– Autoplay tutorial
– Tested and work well on IE 9+, Chrome 32+, Firefox 32+ and Safari 9+
– Complete API, callbacks, keyboard support and options to customize the look.
– Configure positions ( n, e, s, w )
– Change themes
– Animations
– Go back to the top after finished
– Show close box and show navigation
2016-08-04 007
– Highlighting
2016-08-04 008

Bootstro.js

github demo

– Tiny JS library taking advantage of bootstrap’s popover to help guide your users around

2016-08-04 006

Bootstrap Tour

website+demo

– quick and easy way to build your product tours with Twitter Bootstrap Popovers.
– Easy to use and has many options to customize.

2016-08-04 005

Sheperd

website github

  • dependencies: tether
  • IE9 and all modern browsers
  • Works great on mobile

    2016-08-04 003

Crumble

website+demo github

– Add a bubble to any element;
– configure its rotation on a 360 degree axis and define its distance from the centre of the element.
– Bubble size adapts to contents – perfect when text is localised and size can not be determined up front.

2016-08-04 004

Joyride

demo  github

– responsive
– edge-aware repositioning of tooltips
– cookie support
– 12kb

2016-08-04 001