Best way to provide a "tooltip tour"

javascript tooltip jquery-tooltip
Garen Checkley picture Garen Checkley · Feb 19, 2012 · Viewed 9.7k times · Source

What is the best way to provide a quick tour of a webapp using contextual tooltips?

Use case:

  • user navigates to the webapp
  • some form of popup asking if the user wants a guided tour of the interface
  • user can click next on each tooltip to be shown the next one
  • user can cancel the tour at any time by clicking some kind of exit X or button

Is there an easy library out there that does this?

Thanks!

Answer

BenjaminRH picture BenjaminRH · Feb 19, 2012

The easiest way to do this is with Jeff Pickhardt's Guider-JS javascript tooltip walk-through library. It's very easy to use (although it has several very advanced features as well), and does exactly what you described.

You can check out this excellent example of a tooltip walk-through made with Guider-JS.

If you want to see a working example on a production site, it is used extensively on optimizely.com to provide help and walk-through guides for the user interface.

UPDATE: ZURB Foundation is now maintaining the excellent "Joyride" tooltip tour javascript library.

Related questions

Add a tooltip to a div

I have a div tag like this: <div> <label>Name</label> <input type="text"/> </div> How can I displaying a tooltip on :hover of the div, preferably with a fade …

Read More
Description Box using "onmouseover"

I am playing with the onmouseover event in javascript I would like a little box to pop up and remain up until there is no onmouseover anymore I think it's called a description box, but I am not sure. How …

Read More
Can I use complex HTML with Twitter Bootstrap's Tooltip?

If I check official documentation, I can see a property called HTML: Name | Type | default | Description ---------------------------------------------------------------------------- html | boolean | false | Insert html into the tooltip. If false, jquery's text method will be used to insert content into the dom. Use …

Read More