Tooltip
Tooltip directive provides advisory information for a component. Tooltip is integrated within various PrimeNG components.
Usage #
Examples #
Basic #
Tooltip is applied to an element with pTooltip directive where the value of the directive defines the text of the tooltip.
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.
Delay #
Adding delays to the show and hide events are defined with showDelay and hideDelay options respectively.
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, set autoHide to false to keep it visible while the pointer is over the tooltip content. This applies to pointer users only. The tooltip is not part of the tab order and closes when the target loses focus, so a link or a button inside the tooltip cannot be reached with the keyboard. Use Popover for interactive content.
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. A target that has its own aria-describedby keeps that value unchanged.
Interactive Content
Tooltip content is not reachable with the keyboard. The tooltip is rendered outside of the target in the DOM and closes when the target loses focus, so links or buttons inside it are only available to pointer users. Place interactive content in a Popover instead.
Keyboard Support
| Key | Function |
|---|---|
| escape | Closes the tooltip when focus is on the target. |