near_me
開始使用
keyboard_arrow_downwidgets
組件
keyboard_arrow_downlocal_mall
資源
keyboard_arrow_down基於 Material Design 3 與 Web Components 的全新 mdui 2 現已發佈，前往查看 mdui 2 開發文件。
工具提示
Tooltip 通常用來為圖示提供說明，其內容多為純文字，不含圖片或格式化文字。
呼叫方式
- 透過自訂屬性呼叫
- 透過 JavaScript 呼叫
範例
<button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: '列印'}">
<i class="mdui-icon material-icons">local_printshop</i>
</button>
<button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: '列印', position: 'top'}">
<i class="mdui-icon material-icons">local_printshop</i>
</button>
<button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: '列印', delay: 1000}">
<i class="mdui-icon material-icons">local_printshop</i>
</button>透過 JavaScript 呼叫
實例化元件：
// selector 為 CSS 選取器或 DOM 元素
// options 為設定參數，見下面的參數清單
var inst = new mdui.Tooltip(selector, options);參數
| 參數名稱 | 類型 | 預設值 | 說明 |
|---|---|---|---|
position | string | auto | Tooltip 的位置。取值範圍包括 auto、bottom、top、left、right。為 auto 時，會自動判斷位置。預設在下方。優先順序為 bottom > top > left > right |
delay | int | 0 | 延遲觸發，單位毫秒。 |
content | string | Tooltip 的內容。 |
方法
| 方法名稱 | 說明 |
|---|---|
open() | 開啟 Tooltip 允許傳入設定參數，以便每次開啟時能修改內容，例如 |
close() | 關閉 Tooltip |
toggle() | 切換 Tooltip 的狀態 |
getState() | 傳回 Tooltip 的狀態。共包含四種狀態（opening、opened、closing、closed）。 |