Tooltip

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.

NameElement
p-tooltipInput element.
p-tooltip-arrowArrow of the tooltip.
p-tooltip-textText of the tooltip

Screen Reader

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.

Keyboard Support

KeyFunction
escapeCloses the tooltip when focus is on the target.