Tooltip directive provides advisory information for a component.
import Tooltip from 'primevue/tooltip';
app.directive('tooltip', Tooltip);
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 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" />
Tooltip is configured via modifiers that can be chained. Also, tooltip gets displayed on hover event by default, use focus modifier as alternative to set.
<InputText v-tooltip.focus="'Enter your username'" type="text" placeholder="Focus" />
<Button v-tooltip="'Click to proceed'" type="button" label="Save" icon="pi pi-check" />
Tooltip can be customized via class and escape properties.
<InputText v-tooltip.right="{ value: `<h4 class='text-white'>PrimeVue Rocks!</h4>`, escape: true, class: 'custom-error' }" type="text" placeholder="Template Tooltip" />
Adding delays to the show and hide events are defined with showDelay and hideDelay options respectively.
<InputText v-tooltip="{ value: 'Enter your username', showDelay: 1000, hideDelay: 300 }" type="text" placeholder="Delayed" />
Following is the list of structural style classes, for theming classes visit theming page.
| Name | Element |
|---|---|
| p-tooltip | Input element. |
| p-tooltip-arrow | Arrow of the tooltip. |
| p-tooltip-text | Text of the tooltip |
Tooltip component uses tooltip role and when it becomes visible the generated id of the tooltip is defined as the aria-describedby of the target.
| Key | Function |
|---|---|
| escape | Closes the tooltip when focus is on the target. |