「ツールチップツアー」を提供する最善の方法

Question

コンテキストツールチップを使用してWebアプリケーションのクイックツアーを提供する最良の方法は何ですか？

ユースケース：

• ユーザーがWebアプリケーションに移動
• ユーザーが
• ユーザが各ツールチップに[次へ]をクリックすることができますインターフェイスのガイド付きツアーを望んでいるかどうかを尋ねるポップアップのいくつかのフォームが表示されるために次の1人の
• ユーザーは、終了Xやボタンのいくつかの種類

をクリックすれば、いつでもツアーをキャンセルすることができますありますこれを行う簡単なライブラリがありますか？

ありがとうございます！

Answer 1

これを行う最も簡単な方法は、Jeff PickhardtのGuider-JS javascriptのツールチップウォークスルーライブラリです。使い方は非常に簡単です（ただし、いくつかの高度な機能もありますが）。

Guider-JSで作成されたウォークスルーのthis excellent exampleを確認することができます。

実稼働サイトでの作業例を参照する場合は、optimizely.comで幅広く使用され、ユーザーインターフェイスのヘルプとウォークスルーガイドを提供します。

更新： ZURB財団は現在、優れた"Joyride" tooltip tour javascriptライブラリを維持しています。

Answer 2

また、ツールチップを設定するコールバックと呼び出しを閉じるコールバックを常に呼び出すイテレータを使用して、リンク先リストを使用してツアーパートを作成することもできます。次に、必要なツールチップスクリプトを使用できます。ここで私は何を意味するかをお見せなければならないという概念の迅速な証拠です：

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