Angular Tooltip directive provides advisory information for a component.
Setup
Refer to PrimeNG setup documentation for download and installation steps for your environment.
Import
import {TooltipModule} from 'primeng/tooltip';
Getting Started
Tooltip is applied to an element with pTooltip directive where the value of the directive defines the text to display.
<input type="text" pTooltip="Enter your username">
Position
There are four choices to position the tooltip, default value is "right" and alternatives are "top", "bottom", "left". Position is specified using tooltipPosition attribute.
<input type="text" pTooltip="Enter your username" tooltipPosition="top">
Events
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" pTooltip="Enter your username" tooltipPosition="top" tooltipEvent="focus">
Delay
Tooltip is displayed or hidden instantly by default however you may add delays using showDelay and hideDelay properties which accept a number value in terms of milliseconds.
<input type="text" pTooltip="Enter your username" tooltipPosition="top" tooltipEvent="focus" showDelay="1000" hideDelay="500">
Scrolling Containers
When placed inside a scrolling container like an overflown div, tooltip must be appended to another element that has relative positioning instead of document body which is the default.
<div #container style="display:inline-block;position:relative">
<input type="text" pInputText pTooltip="Enter your username" placeholder="Right" [appendTo]="container">
</div>
Theming
Tooltip supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.
Resources
Visit the PrimeNG Tooltip showcase for demos and documentation.