网站新手引导/步骤引导

最近给网站做新手引导，于是封装了一个简易的小插件。

线上Demo

示例代码：

<div id="box_1" style="width:90px;height:90px;background:red;margin: 30px;"></div>
<div id="box_2" style="width:60px;height:120px;background:green;margin: 30px;"></div>

<script src="https://unpkg.com/guide-tips/dist/guide-tips.min.js"></script>
<script>
    const gt = new GuideTips({
        guideList: [{
                els: ["#box_1"],
                title: "step1",
                context: "This is step one"
            },
            {
                els: ["#box_2"],
                title: "step2",
                context: "This is step two"
            }
        ]
    });
    gt.begin();
</script>
           

npm 安装

npm install guide-tips
           

cdn地址

https://unpkg.com/guide-tips/dist/guide-tips.min.js
           

源码及文档：github