Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Best way to provide a "tooltip tour" [closed]

Tags:

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!

like image 603
Garen Checkley Avatar asked Feb 19 '12 20:02

Garen Checkley


People also ask

How long should tooltips be?

How long should tooltips be? A tooltip text should be short, no longer than 140 characters. However, the length of the text can also depend on the positioning of the tooltip.

Should I use a tooltip?

Users shouldn't need to find a tooltip in order to complete their task. Tooltips are best when they provide additional explanation for a form field unfamiliar to some users or reasoning for what may seem like an unusual request.


1 Answers

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.

like image 193
BenjaminRH Avatar answered Sep 17 '22 14:09

BenjaminRH