工具提示

工具提示指令為元件提供建議資訊。

導入 #


import Tooltip from 'primevue/tooltip';

app.directive('tooltip', Tooltip);

位置 #

工具提示的位置有四個選擇，預設值為右，其他選項為上、下、左。


<InputText v-tooltip="'Enter your username'" type="text" placeholder="Right" />
<InputText v-tooltip.top="'Enter your username'" type="text" placeholder="Top" />
<InputText v-tooltip.bottom="'Enter your username'" type="text" placeholder="Bottom" />
<InputText v-tooltip.left="'Enter your username'" type="text" placeholder="Left" />

事件 #

顯示工具提示的事件定義為修飾符，預設事件為滑鼠懸停。


<InputText v-tooltip.focus.top="'Enter your username'" type="text" placeholder="Focus" />

自動隱藏 #

預設情況下，當滑鼠離開目標元素時，工具提示會隱藏，將 autoHide 設為 false 以自訂此行為，以便當游標位於工具提示上時，工具提示保持開啟狀態。


<InputText v-tooltip.bottom="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" />
<InputText v-tooltip.bottom="'Enter your username'" type="text" placeholder="autoHide: true" />

延遲 #

進入和離開事件的延遲分別使用 showDelay 和 hideDelay 選項定義。


<Button v-tooltip="{ value: 'Confirm to proceed', showDelay: 1000, hideDelay: 300 }" label="Save" />

自訂 #

具有自訂樣式和內容的工具提示範例。


<Button
    v-tooltip.bottom="{
        value: 'PrimeVue Rocks',
        pt: {
            arrow: {
                style: {
                    borderBottomColor: 'var(--p-primary-color)'
                }
            },
            text: '!bg-primary !text-primary-contrast !font-medium'
        }
    }"
    label="Button"
/>

無障礙 #

螢幕閱讀器

工具提示元件使用 tooltip 角色，當它變得可見時，工具提示產生的 ID 會定義為目標的 aria-describedby。

鍵盤支援

按鍵	功能
escape	當焦點在目標上時關閉工具提示。