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

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.



<input type="text" pInputText pTooltip="Enter your username" showDelay="1000" hideDelay="1000" placeholder="hover to display tooltip">

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 guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

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.

Properties #

Name	Type	Default	Description
pTooltip	string	null	Text of the tooltip.
tooltipPosition	string	right	Position of the tooltip, valid values are right, left, top and bottom.
fitContent	boolean	true	Automatically adjusts the element position when there is not enough space on the selected position.
tooltipEvent	string	hover	Event to show the tooltip, valid values are hover and focus.
positionStyle	string	absolute	Type of CSS position.
tooltipDisabled	boolean	false	When present, it specifies that the component should be disabled.
appendTo	string	any	Target element to attach the overlay, valid values are "body", "target" 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).
hideDelay	number	null	Delay to hide the tooltip in milliseconds.
showDelay	number	null	Delay to show the tooltip in milliseconds.
life	number	null	Time to wait in milliseconds to hide the tooltip even it is active.
tooltipStyleClass	string	null	Style class of the tooltip.
escape	boolean	true	By default the tooltip contents are rendered as text. Set to false to support html tags in the content.
tooltipZIndex	string	auto	Whether the z-index should be managed automatically to always go on top or have a fixed value.
autoHide	boolean	true	Whether to hide tooltip when hovering over tooltip content.
hideOnEscape	boolean	false	Whether to hide tooltip on escape key press.