前端 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. 範例程式：
    View Raw Code?
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <link rel="stylesheet" href="https://unpkg.com/tooltip-sequence@latest/dist/index.css">
    6. </head>
    7. <body>
    8. <ul>
    9. <li id="brand-name">Item 1</li>
    10. <li id="edit-profile">Item 2</li>
    11. <li id="home-nav">Item 3</li>
    12. <li>Item 4</li>
    13. <li>Item 5</li>
    14. </ul>
    15. <script src="https://unpkg.com/tooltip-sequence@latest/dist/index.min.js"></script>
    16. <script>
    17. const options = {
    18. welcomeText: "Let us take you on a quick tour of the page!",
    19. confirmText: "Let's start",
    20. cancelText: "Maybe later",
    21. sequence: [
    22. {
    23. element: "#brand-name",
    24. description: "This is the brand name of the App.",
    25. },
    26. {
    27. element: "#home-nav",
    28. description: "Click here to go to Home page",
    29. },
    30. {
    31. element: "#edit-profile",
    32. description: "This is the edit profile button",
    33. },
    34. ],
    35. };
    36. createSequence(options);
    37. </script>
    38. </body>
    39. </html>

相關網頁

作者: Tsung

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

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料。