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