Tooltip
Tooltip directive provides advisory information for a component. Tooltip is integrated within various PrimeNG components.
Import #
import { TooltipModule } from 'primeng/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.
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. |
