What is the best way to provide a quick tour of a webapp using contextual tooltips?
Use case:
Is there an easy library out there that does this?
Thanks!
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With