台灣正體

工具提示

簡短的敘述提示使用者目前游標停留的控制項功能。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
<div class="ts-button is-icon" data-tooltip="收藏">
    <span class="ts-icon is-heart-icon"></span>
</div>
概要

這個 JavaScript 模組可以應用在任何元素上,當使用者的游標移動至該元素上方並停留後會呈現基本文字訊息。在行動裝置上,這個標籤會沒有任何作用。

任何有 [data-tooltip] 標籤的元素就會有工具提示,其值是欲顯示的內容純文字(不支援 HTML 標籤)。

※ Tocas UI 的 JavaScript 模組文件呈現方式正在改善。

使用說明
偏好位置

你可以透過 [data-position] 來指定偏好位置。

說明
上方並置中對齊。
上方並置起始位置(通常是左邊)。
上方並置結束位置(通常是右邊)。
預設選項。下方並置中對齊。
下方並置起始位置(通常是左邊)。
下方並置結束位置(通常是右邊)。
<div class="ts-input is-start-icon" data-tooltip="早安!朋友!" data-position="bottom-start">
    <span class="ts-icon is-user-icon"></span>
    <input type="text" placeholder="使用者帳號">
</div>
延遲出現

預設的工具提示會在滑鼠移入後的 200 毫秒出現,你可以透過指定 data-delay 來變更這個設定。若指定為 0 則是馬上出現,而 1000 則代表 1 秒。

不重要預置圖片,僅作為範例用 不重要預置圖片,僅作為範例用
<span class="ts-avatar" data-tooltip="遠藤涼音" data-delay="0">
    <img src="user.png">
</span>
<span class="ts-avatar" data-tooltip="艾西雅" data-delay="1000">
    <img src="user.png">
</span>
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標