Лучший способ предоставить "подсказку"

Каков наилучший способ обеспечить быстрый просмотр webapp с помощью контекстных подсказок?

Случай использования:

пользователь переходит к webapp
какая-то форма всплывающего окна, спрашивающая, хочет ли пользователь провести экскурсию по интерфейсу.
пользователь может щелкнуть по каждой подсказке, которая будет показана следующей.
пользователь может отменить тур в любое время, щелкнув какой-то выход X или кнопку

Есть ли там простая библиотека, которая делает это?

Спасибо!

Ответ 1

Самый простой способ сделать это - использовать библиотеку JavaScript-подсказок Jav Pickhardt Guider-JS. Он очень прост в использовании (хотя он имеет несколько очень продвинутых функций), и делает именно то, что вы описали.

Вы можете проверить этот отличный пример прокрутки всплывающей подсказки, сделанной с помощью Guider-JS.

Если вы хотите увидеть рабочий пример на производственном сайте, он широко используется на optimizely.com для предоставления справки и руководств по прохождению интерфейса пользователя.

ОБНОВЛЕНИЕ: Фонд ZURB теперь поддерживает отличную "Joyride" туровую экскурсию javascript library.

Ответ 2

Вы также можете сами написать часть тура, используя связанный список с итератором, который всегда вызывает обратный вызов для настройки всплывающей подсказки, а другой - для ее закрытия. Затем вы можете использовать любую подсказку script, которую хотите. Вот краткое доказательство концепции, которая должна показать вам, что я имею в виду:

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