Overlay - Tooltip - 《PrimeNG Document》

Documentation
Source

TooltipTooltip provides advisory information for a component.

Documentation

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>

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.
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.
hideDelay	null	number	Delay to hide the tooltip in milliseconds.
showDelay	null	number	Delay to show the tooltip in milliseconds.
life	null	number	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.

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Name	Element
ui-tooltip	Container element
ui-tooltip-arrow	Arrow of the tooltip
ui-tooltip-text	Text of the tooltip

Dependencies

None.

Source

View on GitHub


<h3 class="first">Positions</h3>
<div class="ui-g ui-fluid">
    <div class="ui-g-12 ui-md-3">
        <input type="text" pInputText pTooltip="Enter your username" placeholder="Right">                
    </div>
    <div class="ui-g-12 ui-md-3">
        <input type="text" pInputText pTooltip="Enter your username" tooltipPosition="top" placeholder="Top">
    </div>
    <div class="ui-g-12 ui-md-3">
        <input type="text" pInputText pTooltip="Enter your username" tooltipPosition="bottom" placeholder="Bottom">
    </div>
    <div class="ui-g-12 ui-md-3">
        <input type="text" pInputText pTooltip="Enter your username" tooltipPosition="left" placeholder="Left">
    </div>
</div>
<h3>Focus and Blur</h3>
<input type="text" pInputText pTooltip="Enter your username" placeholder="Right" tooltipEvent="focus" style="margin-left:.5em">