Tooltip directive provides advisory information for a component. Tooltip is integrated within various PrimeNG components.
import { TooltipModule } from 'primeng/tooltip';
Tooltip is applied to an element with pTooltip directive where the value of the directive defines the text to display.
<input type="text" pInputText pTooltip="Enter your username" placeholder="hover to display tooltip">
Position of the tooltip is specified using tooltipPosition attribute. Valid values are top, bottom, right and left. Default position of the tooltip is right.
<input type="text" pInputText pTooltip="Enter your username" tooltipPosition="right" placeholder="Right">
<input type="text" pInputText pTooltip="Enter your username" tooltipPosition="left" placeholder="Left">
<input type="text" pInputText pTooltip="Enter your username" tooltipPosition="top" placeholder="Top">
<input type="text" pInputText pTooltip="Enter your username" tooltipPosition="bottom" placeholder="Bottom">
Tooltip gets displayed on hover event of its target by default, other option is the focus event to display and blur to hide.
<input type="text" pInputText pTooltip="Enter your username" tooltipEvent="focus" placeholder="focus to display tooltip">
Tooltip is hidden when mouse leaves the target element, in cases where tooltip needs to be interacted with, set autoHide to false to change the default behavior.
<input type="text" pInputText pTooltip="Enter your username" [autoHide]="false" placeholder="autoHide: false">
<input type="text" pInputText pTooltip="Enter your username" placeholder="autoHide: true">
Adding delays to the show and hide events are defined with showDelay and hideDelay options respectively.
<input type="text" pInputText pTooltip="Enter your username" showDelay="1000" hideDelay="1000" placeholder="hover to display tooltip">
Tooltip is also configurable by using tooltipOptions property.
<input type="text" pInputText pTooltip="Enter your username" [tooltipOptions]="tooltipOptions" placeholder="hover to display tooltip">
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
p-tooltip | Container 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. |
API defines helper props, events and others for the PrimeNG Tooltip module.
Name | Type | Default | Description |
---|---|---|---|
pTooltip | string | null | Text of the tooltip. |
tooltipPosition | string | right | Position of the tooltip, valid values are right, left, top and bottom. |
fitContent | boolean | true | Automatically adjusts the element position when there is not enough space on the selected position. |
tooltipEvent | string | hover | Event to show the tooltip, valid values are hover and focus. |
positionStyle | string | absolute | Type of CSS position. |
tooltipDisabled | boolean | false | When present, it specifies that the component should be disabled. |
appendTo | string | any | Target element to attach the overlay, valid values are "body", "target" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name). |
hideDelay | number | null | Delay to hide the tooltip in milliseconds. |
showDelay | number | null | Delay to show the tooltip in milliseconds. |
life | number | null | Time to wait in milliseconds to hide the tooltip even it is active. |
tooltipStyleClass | string | null | Style class of the tooltip. |
escape | boolean | true | By default the tooltip contents are rendered as text. Set to false to support html tags in the content. |
tooltipZIndex | string | auto | Whether the z-index should be managed automatically to always go on top or have a fixed value. |
autoHide | boolean | true | Whether to hide tooltip when hovering over tooltip content. |
hideOnEscape | boolean | false | Whether to hide tooltip on escape key press. |