Best way to provide a “tooltip tour” [closed]

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!

Answer 1

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

Answer 2

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.