Source: https://primeng.org/tooltip

• Primary

  Surface

  PresetsAuraMaterialLaraNora

  Ripple

  RTL

• v20

  • v20

  • v19

  • v18

  • v17

• FEATURES

• API

• THEMING

• PASSTHROUGH

Tooltip

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

Import #

import { TooltipModule } from 'primeng/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="top" placeholder="Top" /> <input type="text" pInputText pTooltip="Enter your username" tooltipPosition="bottom" placeholder="Bottom" /> <input type="text" pInputText pTooltip="Enter your username" tooltipPosition="left" placeholder="Left" />

Event #

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.

Save

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

Custom #

Tooltip can use either a string or a TemplateRef.

Button

<p-button [pTooltip]="tooltipContent" severity="secondary" tooltipPosition="bottom" label="Button" /> <ng-template #tooltipContent> <div class="flex items-center"> <svg width="31" height="33" viewBox="0 0 31 33" fill="none" xmlns="http://www.w3.org/2000/svg" class="mr-2"> <path d="..." fill="var(--p-primary-color)" /> </svg> <span> <b>PrimeNG</b> rocks! </span> </div> </ng-template>

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

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

• Import

• Position

• Event

• Auto Hide

• Delay

• Custom

• Tooltip Options

• Accessibility

PrimeBlocks

490+ ready to use UI blocks crafted with PrimeNG and Tailwind CSS.

PrimeNG 20.3.0 by PrimeTek