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.

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

Event to display the tooltip is defined as a modifier, default event is hover.

<InputText"'Enter your username'" type="text" placeholder="Focus" />

Tooltip gets hidden when mouse leaves the target element by default, set autoHide to false to change this behavior.

<InputText v-tooltip="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" />
<InputText v-tooltip="'Enter your username'" type="text" placeholder="autoHide: true" />

Dlays to the enter and leave events are defined with showDelay and hideDelay options respectively.

<Button v-tooltip="{ value: 'Confirm to proceed', showDelay: 1000, hideDelay: 300 }" label="Save" />

A tooltip sample with a custom style and content.

        value: 'PrimeVue Rocks',
        pt: {
            arrow: {
                style: {
                    borderBottomColor: 'var(--primary-color)'
            text: 'bg-primary font-medium'

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.