工具提示 - Tocas UI

範例

明暗色系

遵循使用者設定

亮色

暗色

縮放

標準

放大

標準

縮小

<button class="ts-button is-icon" data-tooltip="收藏">
    <span class="ts-icon is-heart-icon"></span>
</button>

概要

當使用者的游標移入、聚焦在有 [data-tooltip] 屬性的元素，就會顯示工具提示訊息。

組合應用

輸入欄位提示

在輸入欄位指定焦點觸發，就能在使用者輸入文字時提示相關規則。

<div class="ts-input is-start-icon" data-tooltip="使用者帳號長度必須在 6 到 24 個字之間。" data-trigger="focus" data-position="bottom-start">
    <span class="ts-icon is-user-icon"></span>
    <input type="text" placeholder="使用者帳號">
</div>

說明圖示

帶有 [tabindex] 屬性的文字元素能被聚焦，這樣觸控螢幕的使用者就能點擊圖示來開啟工具提示。

這個建築缺少資金

這個建築缺少資金 <span class="ts-icon is-circle-question-icon" data-tooltip="你必須分配財政預算才能啟動這項專案。" data-trigger="focus" tabindex="0"><span>

屬性設定

	說明	預設值
[data-position]	工具提示出現時的偏好位置。 `top` `top-start` `top-end` `bottom` `bottom-start` `bottom-end`	`bottom`
[data-trigger]	工具提示被觸發的方式，使用空白分隔多個觸發方式，如：`hover focus`。 `hover` 是游標移入時觸發（觸控、行動裝置無作用）。 `focus` 是取得焦點時觸發，適合用於輸入欄位。	`hover`
[data-delay]	工具提示從觸發到顯示的延遲時間，單位為毫秒。設為 `0` 表示立即觸發，`1000` 則是 1 秒。	`200`
[data-html]	工具提示的文字是否能顯示 HTML 內容，設為 `true` 表示支援。	`false`