《Disney +》 迪士尼、Marvel、彼思、星球大戰…  「任天堂直面會」將於日本時間2月18日早上7點起進行直播!並且有大約50分鐘的豐富內容!   擁有獨門設計的羽量級電競滑鼠「Xtrfy MZ1-Zy’s Rail」將於日本上市!   1月28日《Mobile Suit Gundam Battle Operation 2》登陸PS5   粉絲們敲碗已久的中文版終於來了!《復活邪神3》繁體中文版上市同時舉辦慶祝活動   『走出戶外 動物森友會 amiibo+』amiibo卡【三麗鷗明星聯名】復刻確定!   Nintendo Switch刀劍亂舞無雙 2022年2月17日發售   祝35週年!「勇者鬥惡龍35週年記念特別節目」確定播出!難不成有DQ12的發表!?   與薩爾達系列首次合作!「TETRIS®王者盃 薩爾達傳說 禦天之劍 HD合作祭」即將開跑!! 

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

商業

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

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

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

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

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

  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

相關網頁

Tsung

隨機商業新聞

Disney Plus