工具提示

工具提示指令为组件提供建议信息。

导入 #


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	当焦点在目标上时，关闭工具提示。