提供“;工具提示之旅”;

Best way to provide a "tooltip tour"

本文关键字：之旅 工具提示 提供      更新时间：2023-09-26

使用上下文工具提示快速浏览Web应用程序的最佳方式是什么？

用例：

  • 用户导航到网络应用程序
  • 某种形式的弹出窗口询问用户是否想要界面的导游
  • 用户可以在每个工具提示上单击"下一步"以显示下一个工具提示
  • 用户可以通过单击某种退出X或按钮随时取消旅行

有没有一个简单的图书馆可以做到这一点？

谢谢！

最简单的方法是使用Jeff Pickhardt的Guider JS javascript工具提示遍历库。它非常易于使用（尽管它也有一些非常高级的功能），并且完全符合您的描述。

您可以查看这个使用GuiderJS制作的工具提示演练的优秀示例。

如果你想在生产网站上看到一个工作示例，optimizely.com上会广泛使用它来为用户界面提供帮助和演练指南。

更新：ZURB基金会现在正在维护优秀的"Joyride"工具提示教程javascript库。

您也可以使用带迭代器的链表自己编写教程部分，迭代器总是调用回调来设置工具提示，并调用回调来关闭工具提示。然后您可以使用任何所需的工具提示脚本。这里有一个概念的快速证明，应该向你展示我的意思：

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链接

相关文章：