Tooltip

Tooltip directive provides advisory information for a component. Tooltip is integrated within various PrimeNG components.

Import #


import { TooltipModule } from 'primeng/tooltip';

Basic #

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">

Template #

Tooltip can use either a string or a TemplateRef.


<button pButton [pTooltip]="tooltipContent" tooltipPosition="bottom" label="Button"></button>
<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 #

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">

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" pInputText pTooltip="Enter your username" tooltipEvent="focus" placeholder="focus to display tooltip">

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.


<input type="text" pInputText pTooltip="Enter your username" [autoHide]="false" placeholder="autoHide: false">
<input type="text" pInputText pTooltip="Enter your username" placeholder="autoHide: true">

Delay #

Adding delays to the show and hide events are defined with showDelay and hideDelay options respectively.


<button pButton pTooltip="Confirm to proceed" showDelay="1000" hideDelay="300" label="Save"></button>

Tooltip Options #

Tooltip is also configurable by using tooltipOptions property.


<input type="text" pInputText pTooltip="Enter your username" [tooltipOptions]="tooltipOptions" placeholder="hover to display tooltip">

Style #

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.

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.

Tooltip API

API defines helper props, events and others for the PrimeNG Tooltip module.

Tooltip #

Tooltip directive provides advisory information for a component.

Properties #

Defines the input properties of the component.

name	type	default	description
tooltipPosition	string	null	Position of the tooltip.
tooltipEvent	any	hover	Event to show the tooltip.
appendTo	any	null	Target element to attach the overlay, valid values are "body", "target" or a local ng-F variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
positionStyle	string	null	Type of CSS position.
tooltipStyleClass	string	null	Style class of the tooltip.
tooltipZIndex	string	null	Whether the z-index should be managed automatically to always go on top or have a fixed value.
escape	boolean	true	By default the tooltip contents are rendered as text. Set to false to support html tags in the content.
showDelay	number	null	Delay to show the tooltip in milliseconds.
hideDelay	number	null	Delay to hide the tooltip in milliseconds.
life	number	null	Time to wait in milliseconds to hide the tooltip even it is active.
positionTop	number	null	Specifies the additional vertical offset of the tooltip from its default position.
positionLeft	number	null	Specifies the additional horizontal offset of the tooltip from its default position.
autoHide	boolean	true	Whether to hide tooltip when hovering over tooltip content.
fitContent	boolean	true	Automatically adjusts the element position when there is not enough space on the selected position.
hideOnEscape	boolean	true	Whether to hide tooltip on escape key press.
content	string \| TemplateRef<HTMLElement>	null	Content of the tooltip.
disabled	boolean	null	When present, it specifies that the component should be disabled.
tooltipOptions	TooltipOptions	null	Specifies the tooltip configuration options for the component.

Interfaces #

Defines the custom interfaces used by the module.

TooltipOptions #

Defines options of Tooltip.

name	type	description
tooltipLabel	string	Label of tooltip.
tooltipPosition	"left" \| "top" \| "bottom" \| "right"	Position of tooltip.
tooltipEvent	"focus" \| "hover"	Event to show the tooltip.
appendTo	any	Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
positionStyle	string	Type of CSS position.
tooltipStyleClass	string	Style class of the tooltip.
tooltipZIndex	string	Whether the z-index should be managed automatically to always go on top or have a fixed value.
escape	boolean	By default the tooltip contents are rendered as text. Set to false to support html tags in the content.
disabled	boolean	When present, it specifies that the component should be disabled.
positionTop	number	Specifies the additional vertical offset of the tooltip from its default position.
positionLeft	number	Specifies the additional horizontal offset of the tooltip from its default position.
showDelay	number	Delay to show the tooltip in milliseconds.
hideDelay	number	Delay to hide the tooltip in milliseconds.
life	number	Time to wait in milliseconds to hide the tooltip even it is active.
id	string	When present, it adds a custom id to the tooltip.