提供「工具提示遊覽」的最佳方式

Question

使用上下文工具提示提供webapp快速瀏覽的最佳方式是什麼？

使用案例：

• 用戶導航到webapp的
• 某種形式的彈出窗口，如果用戶想要的界面導遊
• 用戶可以點擊每個提示旁邊問要顯示的下一個
• 用戶可以通過點擊某種退出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