Tooltip is a directive that needs to be imported and configured with a name of your choice. Global configuration is done with the app.directive function.
import Tooltip from 'primevue/tooltip';
app.directive('tooltip', Tooltip);
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
Tooltip can also be configured locally using the directives property of your component.
directives: {
'tooltip': Tooltip
}
Once the tooltip is configured, it can be attached to a target using the v- prefix.
<InputText type="text" v-tooltip="'Enter your username'" />
Also, more than one value can be used.
<InputText type="text" v-tooltip="{ value: 'Enter your username', disabled: true }" />
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 type="text" v-tooltip.right="'Enter your username'" />
<InputText type="text" v-tooltip.top="'Enter your username'" />
<InputText type="text" v-tooltip.bottom="'Enter your username'" />
<InputText type="text" v-tooltip.left="'Enter your username'" />
Tooltip gets displayed on hover event of its target by default, other option is the focus event to display and blur to hide.
<InputText type="text" v-tooltip.focus="'Enter your username'" />
As seen in positions and event sections, tooltip is configured via modifiers that can be chained. Tooltip below, gets displayed at the top of the input at focus event.
<InputText type="text" v-tooltip.top.focus="'Enter your username'" />
| Name | Type | Default | Description |
|---|---|---|---|
| value | string | null | Text of the tooltip |
| disabled | boolean | false | When present, it specifies that the component should be disabled. |
| id | string | null | When present, it adds a custom id to the tooltip. |
| class | string | null | When present, it adds a custom class to the tooltip. |
| escape | boolean | false | By default the tooltip contents are not rendered as text. Set to true to support html tags in the content. |
| fitContent | boolean | true | Automatically adjusts the element position when there is not enough space on the selected position. |
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-tooltip | Input element. |
| p-tooltip-arrow | Arrow of the tooltip. |
| p-tooltip-text | Text of the tooltip |
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. |
None.