執行效果：

引入外掛：

<link rel="stylesheet" href="ez-guide.css">
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<script src="ez-guide.js"></script>

由於是基於jq寫的，所以要引入jq環境。

呼叫方式：

(function($){

    // 定義提示陣列
    // 每個提示包括以下幾個屬性：
 

    //     x：提示框距離父容器左側的長度（left）
    //     y：提示框距離父容器頂部的長度（top）
    //     w：提示框的寬度（width）
    //     h：提示框的高度（height）
    //    desc：提示框的文字描述內容
    //     direction：提示框的文字描述顯示位置。可選值：bottom（下方，預設）；top（上方）；left（左側）；right（右側）
    var opts = [
        { x: 100, y: 50, w: 200, h: 100, desc: '點選文章區域，檢視詳細內容。', direction: 'bottom' },
        { x: 
 
200, y: 80, w: 100, h: 50, desc: '有聲讀報。' }
    ];

    // 定義提示結束之後的回撥函式，一般用於設定store或者cookie
    var callback = function(){
        store.set('guide', true);
    }

    // 呼叫提示框
    guide(opts, callback);

})(jQuery);

原始碼：https://gitee.com/itez/ez-guide