Best way to provide a "tooltip tour"

Question

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!

I have written a short [review][1] about on-page guidance and webapp tours which recently was published at the dailyjs.com. In it you can find several DIY solutions for implementing this functionality. < shame-less-yet-relevant-plug > You are also most welcome to check out our [on-page guidance as a service][2] at iridize.com. I hope it is the best way to provide this to your users, and I am pretty sure it would be the easiest. < /shame-less-yet-relevant-plug > [1]: http://dailyjs.com/2012/11/02/on-screen-guidance-intro [2]: https://iridize.com — odedbd, Dec 22 '12 at 18:03

BenjaminRH · Accepted Answer · 2013-09-18T00:00:53.200

26

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.

edited Sep 18 '13 at 00:00

answered Feb 19 '12 at 20:49

BenjaminRH

11,974
7
49
76

2

Exactly what I was hoping for! – Garen Checkley Feb 19 '12 at 21:51
1

Please remember to mark this as "Accepted" if it answers your question. – BenjaminRH Feb 19 '12 at 23:44
1

Joyride is an excellent choice - just cut my dev time in half! – carbontwelve Dec 04 '13 at 11:31

score 1 · Answer 2 · answered Feb 19 '12 at 21:03

You could also write the tour part yourself using a linked list with an iterator that always calls a callback to set up the tooltip and one to close it. You can then use any tooltip script you want. Here's a quick proof of concept that should show you what I mean:

var toolTipList = {
    tooltips: [],
    currentTooltip: {},
    addTooltip: function(tooltip){
        var currentTail = this.tooltips.length > 0 ? this.tooltips[this.tooltips.length - 1] : {};
        var newTail = {
            tooltip: tooltip,
            prev: currentTail
        };
        currentTail.next = newTail;
        this.tooltips.push(newTail);
    },

    initialize: function(){
        this.currentTooltip = this.tooltips[0];
        this.currentTooltip.tooltip.callback();
    },

    next: function(){
        if(this.currentTooltip.next){
            this.currentTooltip.tooltip.close();
            this.currentTooltip = this.currentTooltip.next;
            this.currentTooltip.tooltip.callback();        
        }   
    }           
};


for(var i = 0; i < 10; i++){
    toolTipList.addTooltip({
        callback: function(){ 
            // called every time next is called
            // open your tooltip here and 
            // attach the event that calls 
            // toolTipList.next when the next button is clicked
            console.log('called'); 
        },
        close: function(){ 
            // called when next is called again
            // and this tooltip needs to be closed
            console.log('close'); 
        }
    });
}

toolTipList.initialize();

setInterval(function(){toolTipList.next();}, 500);

JSFiddle link

Best way to provide a "tooltip tour"

2 Answers2

Linked