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">
Tooltip can use either a string or a TemplateRef.
<input type="text" pInputText [pTooltip]="tooltipContent" placeholder="hover to display tooltip">
<ng-template #tooltipContent>
<div class="flex align-items-center">
<img src="https://primefaces.org/cdn/primeng/images/primeng.svg" height="20" class="mr-2" />
<span>
<b>PrimeNG</b> rocks!
</span>
</div>
</ng-template>
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.
Tooltip directive provides advisory information for a component.
Defines the input properties of the component.
Defines the custom interfaces used by the module.
Defines options of Tooltip.