X

前端 Tooltip 一步一步教學的工具套件

網頁、App 常常都會有頁面介紹,會將頁面區塊框一個框框,然後旁邊秀出說明或者教學。

這些通常會在 HTML 元素旁邊,使用 tooltip 的方式秀出來,這次介紹的套件,就是秀出來外,加上循環順序的設定,就可以做出一步一步的教學等效果。

前端 Tooltip 一步一步教學的工具套件(函式庫)

Tooltip Sequence 的官方網站、GitHub 資料如下述:(此篇為 0.2.2 版)

下述的程式碼裡面,幾個簡單的說明:

  1. 頁面 css、js 載入:
    • <link rel="stylesheet" href="https://unpkg.com/tooltip-sequence@latest/dist/index.css">
    • <script src="https://unpkg.com/tooltip-sequence@latest/dist/index.min.js"></script>
  2. JS 撰寫說明:
    • confirmText、cancelText 等等文字說明,請自行更換。
    • 程式會依照 sequence 設定的順序執行,下述是故意跑 Item 1 → Item 3 → Item 2 的。
    • 程式啟動:createSequence(options);,不想啟動或者想要 OnClick 再啟動,就自行呼叫囉~
  3. 範例程式:
    <!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="https://unpkg.com/tooltip-sequence@latest/dist/index.css"> 
    </head> 
    <body> 
    <ul> 
    <li id="brand-name">Item 1</li> 
    <li id="edit-profile">Item 2</li> 
    <li id="home-nav">Item 3</li> 
    <li>Item 4</li> 
    <li>Item 5</li> 
    </ul> 
    <script src="https://unpkg.com/tooltip-sequence@latest/dist/index.min.js"></script> 
    <script> 
    const options = {
       welcomeText: "Let us take you on a quick tour of the page!", 
       confirmText: "Let's start", 
        cancelText: "Maybe later", 
        sequence: [ 
        { 
            element: "#brand-name", 
            description: "This is the brand name of the App.", 
        }, 
        { 
            element: "#home-nav", 
            description: "Click here to go to Home page", 
        }, 
        { 
            element: "#edit-profile", 
            description: "This is the edit profile button", 
        }, 
    ], 
    }; 
    createSequence(options); 
    </script> 
    </body> 
    </html>

相關網頁

Tsung: 對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活.
Related Post