Tooltip Tooltip provides advisory information for a component.

Positions

Focus and Blur

Import


import {Tooltip} from 'primeng/primeng';

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

Attributes

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.

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

Native component that requires the css of PrimeUI Tooltip.


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