網站新手引導/步驟引導

最近給網站做新手引導，于是封裝了一個簡易的小插件。

線上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