Tooltip

Tooltip directive provides advisory information for a component.

Import #


import Tooltip from 'primevue/tooltip';

app.directive('tooltip', Tooltip);

Position #

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

Event #

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


<InputText v-tooltip.focus.top="'Enter your username'" type="text" placeholder="Focus" />

Auto Hide #

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

Delay #

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

Custom #

A tooltip sample with a custom style and content.


<Button
    v-tooltip.bottom="{
        value: 'PrimeVue Rocks',
        pt: {
            arrow: {
                style: {
                    borderBottomColor: 'var(--primary-color)'
                }
            },
            text: 'bg-primary font-medium'
        }
    }"
    label="Button"
/>

Accessibility #

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

Key	Function
escape	Closes the tooltip when focus is on the target.