網頁、App 常常都會有頁面介紹，會將頁面區塊框一個框框，然後旁邊秀出說明或者教學。
這些通常會在 HTML 元素旁邊，使用 tooltip 的方式秀出來，這次介紹的套件，就是秀出來外，加上循環順序的設定，就可以做出一步一步的教學等效果。
前端 Tooltip 一步一步教學的工具套件(函式庫)
Tooltip Sequence 的官方網站、GitHub 資料如下述：(此篇為 0.2.2 版)
- 官方網站：Tooltip Sequence
- GitHub：SoorajSNBlaze333/tooltip-sequence: A simple step by step tooltip helper for any site
下述的程式碼裡面，幾個簡單的說明：
- 頁面 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>
- JS 撰寫說明：
- confirmText、cancelText 等等文字說明，請自行更換。
- 程式會依照 sequence 設定的順序執行，下述是故意跑 Item 1 → Item 3 → Item 2 的。
- 程式啟動：createSequence(options);，不想啟動或者想要 OnClick 再啟動，就自行呼叫囉~
- 範例程式：
<!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>
相關網頁
