import {TooltipModule} from 'primeng/primeng';
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">
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">
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">
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. |
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 |
None.
<h3 class="first">Positions</h3>
<div class="ui-grid ui-grid-responsive ui-fluid ui-grid-pad">
<div class="ui-grid-row">
<div class="ui-grid-col-3">
<input type="text" pInputText pTooltip="Enter your username" placeholder="Right">
</div>
<div class="ui-grid-col-3">
<input type="text" pInputText pTooltip="Enter your username" tooltipPosition="top" placeholder="Top">
</div>
<div class="ui-grid-col-3">
<input type="text" pInputText pTooltip="Enter your username" tooltipPosition="bottom" placeholder="Bottom">
</div>
<div class="ui-grid-col-3">
<input type="text" pInputText pTooltip="Enter your username" tooltipPosition="left" placeholder="Left">
</div>
</div>
</div>
<h3>Focus and Blur</h3>
<input type="text" pInputText pTooltip="Enter your username" placeholder="Right" tooltipEvent="focus" style="margin-left:10px">