Tooltip
Tooltip directive provides advisory information for a component. Tooltip is integrated within various PrimeNG components.
Position of the tooltip is specified using tooltipPosition attribute. Valid values are top, bottom, right and left. Default position of the tooltip is right.
Usage #
Examples #
Position #
Position of the tooltip is specified using tooltipPosition attribute. Valid values are top, bottom, right and left. Default position of the tooltip is right.
Event #
Tooltip gets displayed on hover event of its target by default, other option is the focus event to display and blur to hide.
Auto Hide #
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.
Delay #
Adding delays to the show and hide events are defined with showDelay and hideDelay options respectively.
Custom #
Tooltip can use either a string or a TemplateRef.
Tooltip Options #
Tooltip is also configurable by using tooltipOptions property.
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. |
