Tooltip（工具提示）顯示一個簡短的文本提示，將滑鼠懸停在輸入框（InputText）上時，會彈出提示框。

Difficult circumstances serve as a textbook of life for people.
困難坎坷是人們的生活教科書。

應用場景：

• 圖標、按鈕等提供額外的功能說明。
• 提供表單字段的填寫提示。
• 提供輔助的上下文信息，而不會佔據頁面空間。

引入 Tooltip：

import Tooltip from 'primevue/tooltip';
app.directive('tooltip', Tooltip);

將 Tooltip 指令註冊到 Vue 應用中，並通過 v-tooltip 指令在模板中應用。

基本用法：

<template>
    <div class="card flex flex-wrap justify-content-center gap-2">
        <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" />
    </div>
</template>

• v-tooltip 指令，對每個 InputText 輸入框設置了工具提示

1. 內容:

v-tooltip="'Enter your username'"

輸入框添加工具提示，當滑鼠懸停在輸入框上時，會顯示提示

2. 方向:
   v-tooltip.top：工具提示顯示在輸入框的上方。
   v-tooltip.bottom：工具提示顯示在輸入框的下方。
   v-tooltip.left：工具提示顯示在輸入框的左側。
   v-tooltip.right：工具提示顯示在輸入框的右側。

自定義樣式的工具提示

<template>
    <div class="card flex flex-wrap justify-content-center">
        <Button
            v-tooltip.bottom="{
                value: 'PrimeVue Rocks',
                pt: {
                    arrow: {
                        style: {
                            borderBottomColor: 'var(--primary-color)'
                        }
                    },
                    text: 'bg-primary font-medium'
                }
            }"
            severity="secondary"
            label="Button"
        />
    </div>
</template>

這邊使用 pt （穿透屬性）的縮寫。允許開發者自定義組件內部的 HTML 結構和樣式，並覆蓋或擴展組件的默認屬性或樣式。

• arrow：自定義工具提示箭頭的樣式。
  • style：可以為箭頭定義內聯樣式。
  • borderBottomColor：邊框顏色設置為CSS 變數 var(--primary-color)。
• text：自定義工具提示文本的樣式。
  • bg-primary：文本的背景色為主題色。
  • font-medium：``文本設置為中等粗體字。

參考資料:
https://v3.primevue.org/tooltip/