Vue3 Tooltip directive provides advisory information for a component. It supports Vue 3 with PrimeVue 3 and Vue 2 with PrimeVue 2.
Setup
Refer to PrimeVue setup documentation for download and installation steps for your environment such as Vue CLI, Vite or browser.
Getting Started
Tooltip is a directive that needs to be imported and configured with a name of your choice. Global configuration is done with the app.directive function.
import Tooltip from 'primevue/tooltip';
app.directive('tooltip', Tooltip);
Tooltip can also be configured locally using the directives property of your component.
directives: {
'tooltip': Tooltip
}
Once the tooltip is configured, it can be attached to a target using the v- prefix.
<InputText type="text" v-tooltip="'Enter your username'" />
Positions
There are four choices to position the tooltip, default value is "right" and alternatives are "top", "bottom", "left". Position is specified using a modifier.
<InputText type="text" v-tooltip.right="'Enter your username'" />
<InputText type="text" v-tooltip.top="'Enter your username'" />
<InputText type="text" v-tooltip.bottom="'Enter your username'" />
<InputText type="text" v-tooltip.top="'Enter your username'" />
Events
Tooltip gets displayed on hover event of its target by default, other option is the focus event to display and blur to hide.
<InputText type="text" v-tooltip.focus="'Enter your username'" />
Modifiers
As seen in positions and event sections, tooltip is configured via modifiers that can be chained. Tooltip below, gets displayed at the top of the input at focus event.
<InputText type="text" v-tooltip.top.focus="'Enter your username'" />
Theming
Tooltip supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.
Resources
Visit the PrimeVue Tooltip showcase for demos and documentation.