Tocas UI 開始使用 元件樣式 實際範例
台灣正體
台灣正體
GitHub
Tocas UI
台灣正體
台灣正體

工具提示

簡短的敘述提示使用者目前游標停留的控制項功能。
初入上手
開始使用 Getting Started 主題色系 Colors 響應式設計 Responsive 輔助樣式 Utilities
格局設計
箱型容器 Box 界限容器 Container 內容區塊 Content 表單控制項 Control 網格系統 Grid 間隔容器 Wrap
表單
按鈕 Button 核取方塊 Checkbox 欄位分組 Fieldset 檔案上傳 File 輸入欄位 Input 選項按鈕 Radio 下拉式選擇 Select 項目切換 Selection 指撥開關 Switch
文字與段落
分隔線 Divider 標題 Header 內容遮罩 Mask 引言 Quote 片段 Segment 文字 Text
視覺回饋
空白看板 Blankslate 圓形量測計 Gauge 讀取狀態 Loading 快顯視窗 Modal 提示訊息 Notice 預置內容 Placeholder 步驟指示器 Procedure 進度條 Progress 簡短通知 Snackbar
多媒體與圖示
大頭貼 Avatar 國家旗幟 Flag 圖示 Icon 圖示項目 Iconset 多媒體圖片 Image 圖片組合 Imageset
資料顯示
可折疊內容 Accordion 計數徽章 Badge 檢查清單 Checklist 關聯標籤 Chip 關閉按鈕 Close 交談會話 Conversation 清單 List 中繼資料 Meta 評分 Rating 統計數據 Statistic 表格 Table 時間軸 Timeline
導覽
導覽標記 Breadcrumb 彈出式選單 Dropdown 選單 Menu 頁數導覽列 Pagination 分頁籤 Tab
應用程式
邊緣抽屜 App Drawer 格局劃分 App Layout 導航列 App Navbar 側邊欄 App Sidebar 頂部列 App Topbar
JavaScript 模組
選單模組 DropdownJS 工具提示 TooltipJS 分頁模組 TabJS 樣式切換 ToggleJS
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小 
<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>
使用說明
偏好位置 data-position 延遲出現 data-delay
GitHub 開始使用 元件樣式 實際範例
由來自 台灣的 Yami Odymel 所設計，當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT，文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言，而卡莉絲伊繁星屬對空音商事。
台灣正體語系協作者：Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標