Tooltip

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.

NameElement
p-tooltipContainer element.
p-tooltip-arrowArrow of the tooltip.
p-tooltip-textText of the tooltip.
Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

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

KeyFunction
escapeCloses the tooltip when focus is on the target.