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

網頁、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

下述的程式碼裡面，幾個簡單的說明：

1. 頁面 css、js 載入：
2. JS 撰寫說明：
   • confirmText、cancelText 等等文字說明，請自行更換。
   • 程式會依照 sequence 設定的順序執行，下述是故意跑 Item 1 → Item 3 → Item 2 的。
   • 程式啟動：createSequence(options);，不想啟動或者想要 OnClick 再啟動，就自行呼叫囉~
3. 範例程式：

    
    
    
    
    
    
    
    
   Item 1
    
   Item 2
    
   Item 3
    
   Item 4
    
   Item 5
    
    
    
    
    
   

相關網頁

• CSS Tooltip
• 用 data-* 屬性做出純 CSS 的 tooltip