Tooltip工具提示
工具提示用來為特定元素提供補充文字提示或上下文資訊，方便使用者更好地理解該元素的功能或用途。
按需引入元件：
import 'mdui/components/tooltip.js';
按需引入元件的 TypeScript 型別：
import type { Tooltip } from 'mdui/components/tooltip.js';
使用範例：
button
<mdui-tooltip content="Plain tooltip">
<mdui-button>button</mdui-button>
</mdui-tooltip>
預設為純文字工具提示。可以透過 content 屬性設定工具提示的內容。
button
<mdui-tooltip content="Plain tooltip">
<mdui-button>button</mdui-button>
</mdui-tooltip>
原始碼也可以透過 content slot 設定工具提示的內容。
<mdui-tooltip>
<mdui-button>button</mdui-button>
<div slot="content">
<div style="font-size: 1.4em">title</div>
<div>content</div>
</div>
</mdui-tooltip>
原始碼
設定 variant 屬性為 rich 可以建立進階工具提示。可以透過 headline 屬性設定工具提示的標題，content 屬性設定工具提示的內容。
button
<mdui-tooltip
variant="rich"
headline="進階工具提示"
content="進階工具提示可凸顯需要使用者注意的特定元素，並支援多行說明文字。"
>
<mdui-button>button</mdui-button>
</mdui-tooltip>
原始碼也可以透過 headline、content slot 設定工具提示的標題和內容。透過 action slot 設定工具提示的操作按鈕。
button
進階工具提示
進階工具提示可凸顯需要使用者注意的特定元素，並支援多行說明文字。
Action
<mdui-tooltip variant="rich">
<mdui-button>button</mdui-button>
<div slot="headline">進階工具提示</div>
<div slot="content">進階工具提示可凸顯需要使用者注意的特定元素，並支援多行說明文字。</div>
<mdui-button slot="action" variant="text">Action</mdui-button>
</mdui-tooltip>
原始碼
透過 placement 屬性可以設定工具提示的位置。
<div class="example-placement">
<div class="row">
<mdui-tooltip placement="top-left" content="top-left">
<mdui-card variant="outlined"></mdui-card>
</mdui-tooltip>
<mdui-tooltip placement="top-start" content="top-start">
<mdui-card variant="outlined"></mdui-card>
</mdui-tooltip>
<mdui-tooltip placement="top" content="top">
<mdui-card variant="outlined"></mdui-card>
</mdui-tooltip>
<mdui-tooltip placement="top-end" content="top-end">
<mdui-card variant="outlined"></mdui-card>
</mdui-tooltip>
<mdui-tooltip placement="top-right" content="top-right">
<mdui-card variant="outlined"></mdui-card>
</mdui-tooltip>
</div>
<div class="row">
<mdui-tooltip placement="left-start" content="left-start">
<mdui-card variant="outlined"></mdui-card>
</mdui-tooltip>
<mdui-tooltip placement="right-start" content="right-start">
<mdui-card variant="outlined"></mdui-card>
</mdui-tooltip>
</div>
<div class="row">
<mdui-tooltip placement="left" content="left">
<mdui-card variant="outlined"></mdui-card>
</mdui-tooltip>
<mdui-tooltip placement="right" content="right">
<mdui-card variant="outlined"></mdui-card>
</mdui-tooltip>
</div>
<div class="row">
<mdui-tooltip placement="left-end" content="left-end">
<mdui-card variant="outlined"></mdui-card>
</mdui-tooltip>
<mdui-tooltip placement="right-end" content="right-end">
<mdui-card variant="outlined"></mdui-card>
</mdui-tooltip>
</div>
<div class="row">
<mdui-tooltip placement="bottom-left" content="bottom-left">
<mdui-card variant="outlined"></mdui-card>
</mdui-tooltip>
<mdui-tooltip placement="bottom-start" content="bottom-start">
<mdui-card variant="outlined"></mdui-card>
</mdui-tooltip>
<mdui-tooltip placement="bottom" content="bottom">
<mdui-card variant="outlined"></mdui-card>
</mdui-tooltip>
<mdui-tooltip placement="bottom-end" content="bottom-end">
<mdui-card variant="outlined"></mdui-card>
</mdui-tooltip>
<mdui-tooltip placement="bottom-right" content="bottom-right">
<mdui-card variant="outlined"></mdui-card>
</mdui-tooltip>
</div>
</div>
<style>
.example-placement mdui-card {
width: 2.5rem;
height: 2.5rem;
margin: 0.25rem;
}
.example-placement .row:nth-child(2) mdui-tooltip:last-child mdui-card,
.example-placement .row:nth-child(3) mdui-tooltip:last-child mdui-card,
.example-placement .row:nth-child(4) mdui-tooltip:last-child mdui-card {
margin-left: 10rem;
}
</style>
原始碼
透過 trigger 屬性，可以設定工具提示的觸發方式。
button
<mdui-tooltip trigger="click" content="tooltip">
<mdui-button>button</mdui-button>
</mdui-tooltip>
原始碼
當觸發方式為 hover 時，可以透過 open-delay 和 close-delay 屬性分別設定開啟與關閉工具提示的延遲，單位為毫秒。
button
<mdui-tooltip open-delay="1000" close-delay="1000" content="tooltip">
<mdui-button>button</mdui-button>
</mdui-tooltip>
原始碼
button
<mdui-tooltip disabled content="tooltip">
<mdui-button>button</mdui-button>
</mdui-tooltip>
原始碼| HTML 屬性 | JavaScript 屬性 | Reflect | 型別 | 預設值 |
|---|
variant | variant | | 'plain' | 'rich' | 'plain' |
tooltip 的形狀。預設為 plain。可選值包括：
plain：純文字，適用於簡單的單行文字rich：富文字，可以包含標題、正文和操作按鈕
|
placement | placement | | 'auto' | 'top-left' | 'top-start' | 'top' | 'top-end' | 'top-right' | 'bottom-left' | 'bottom-start' | 'bottom' | 'bottom-end' | 'bottom-right' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' | 'auto' |
tooltip 的位置。預設為 auto。可選值包括：
auto：自動判斷位置。variant="plain" 時，優先使用 top；variant="rich" 時，優先使用 bottom-righttop-left：位於左上方top-start：位於上方，左對齊top：位於上方，置中對齊top-end：位於上方，右對齊top-right：位於右上方bottom-left：位於左下方bottom-start：位於下方，左對齊bottom：位於下方，置中對齊bottom-end：位於下方，右對齊bottom-right：位於右下方left-start：位於左側，頂部對齊left：位於左側，置中對齊left-end：位於左側，底部對齊right-start：位於右側，頂部對齊right：位於右側，置中對齊right-end：位於右側，底部對齊
|
open-delay | openDelay | | number | 150 |
滑鼠懸停觸發顯示的延遲，單位為毫秒
|
close-delay | closeDelay | | number | 150 |
滑鼠懸停觸發隱藏的延遲，單位為毫秒
|
headline | headline | | string | - |
tooltip 的標題。僅 variant="rich" 時可使用。也可以透過 slot="headline" 設定
|
content | content | | string | - |
tooltip 的內容。也可以透過 slot="content" 設定
|
trigger | trigger | | 'click' | 'hover' | 'focus' | 'manual' | string | 'hover focus' |
觸發方式，支援多個值，用空格分隔。可選值包括：
click：點擊時觸發hover：滑鼠懸停時觸發focus：聚焦時觸發manual：只能透過程式方式開啟和關閉 tooltip，不能再指定其他觸發方式
|
disabled | disabled | | boolean | false |
是否停用 tooltip
|
open | open | | boolean | false |
是否顯示 tooltip
|
| 名稱 |
|---|
open |
tooltip 開始顯示時觸發。可透過呼叫 event.preventDefault() 阻止 tooltip 開啟
|
opened |
tooltip 顯示動畫完成時，事件被觸發
|
close |
tooltip 開始隱藏時觸發。可透過呼叫 event.preventDefault() 阻止 tooltip 關閉
|
closed |
tooltip 隱藏動畫完成時，事件被觸發
|
| 名稱 |
|---|
| 預設 |
tooltip 觸發的目標元素，只有 default slot 中的第一個元素會作為目標元素
|
headline |
tooltip 的標題，只有當 variant="rich" 時，此 slot 才有效
|
content |
tooltip 的內容，可以包含 HTML。若只包含純文字，可以使用 content 屬性代替
|
action |
tooltip 底部的按鈕，只有當 variant="rich" 時，此 slot 才有效
|
