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"'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" />

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

escapeCloses the tooltip when focus is on the target.