Tooltip

Tooltip functionality is integrated within various PrimeReact components.


import { Tooltip } from 'primereact/tooltip';
         

Form components have built-in support with the tooltip property and customizations like positioning is provided with tooltipOptions.


<InputText type="text" placeholder="Right" tooltip="Enter your username" />
<InputText type="text" placeholder="Top" tooltip="Enter your username" tooltipOptions={{ position: 'top' }} />
<InputText type="text" placeholder="Bottom" tooltip="Enter your username" tooltipOptions={{ position: 'bottom' }} />
<InputText type="text" placeholder="Left" tooltip="Enter your username" tooltipOptions={{ position: 'left' }} />
<InputText type="text" placeholder="Mouse" tooltip="Enter your username" tooltipOptions={{ position: 'mouse' }} />
         

Tooltip gets displayed on hover event by default, use the event option to set focus or both as alternatives.


<InputText type="text" placeholder="Hover" tooltip="Enter your username"/>
<InputText type="text" placeholder="Focus" tooltip="Enter your username" tooltipOptions={{ event: 'focus' }} />
<InputText type="text" placeholder="Both" tooltip="Enter your username" tooltipOptions={{ event: 'both' }} />
         

Standalone Tooltip component can attach to any element using the target property that accepts a valid query selector. In this case, content and options need to be defined with data-pr attributes.


<Tooltip target=".custom-target-icon" />

<i className="custom-target-icon pi pi-envelope p-text-secondary p-overlay-badge"
    data-pr-tooltip="No notifications"
    data-pr-position="right"
    data-pr-at="right+5 top"
    data-pr-my="left center-2"
    style={{ fontSize: '2rem', cursor: 'pointer' }}>
    <Badge severity="danger"></Badge>
</i>
         

When mouseTrack option is enabled, position of the Tooltip is updated according to the pointer coordinates.


<Button type="button" label="Save" icon="pi pi-check" tooltip="Save" tooltipOptions={{ position: 'bottom', mouseTrack: true, mouseTrackTop: 15 }} />

<Tooltip target=".logo" mouseTrack mouseTrackLeft={10} />
<img className="logo" alt="logo" src="/images/logo.png" data-pr-tooltip="PrimeReact-Logo" height="80px" />
         

Custom content can be placed as the tooltip value either with content property or nesting the content as children.


<Tooltip target=".custom-tooltip-btn">
    <img alt="logo" src="/images/logo.png" data-pr-tooltip="PrimeReact-Logo" height="80px" />
</Tooltip>

<Button className="custom-tooltip-btn" type="button" label="Save" icon="pi pi-check" />
         

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.


<Button type="button" label="Save" icon="pi pi-check" tooltip="Save (autoHide: true)" />

<Tooltip target=".tooltip-button" autoHide={false}>
    <div className="flex align-items-center">
        <span style={{ minWidth: '5rem' }}>Count: {count}</span>
        <Button type="button" icon="pi pi-plus" onClick={() => setCount(count + 1)} className="p-button-rounded p-button-success ml-2"></Button>
        <Button type="button" icon="pi pi-minus" onClick={() => setCount(count - 1)} className="p-button-rounded p-button-danger ml-2"></Button>
    </div>
</Tooltip>
<Button className="tooltip-button" type="button" label="Number" icon="pi pi-plus" />
         

Tooltip content is reactive to reflect changes related to the target component.


<Button type="button" label="Save" icon="pi pi-check" tooltip={buttonTooltip} onClick={() => setButtonTooltip('Completed')} />

<Tooltip target=".knob" content={`${knobValue}%`} />
<Knob className="knob" value={knobValue} onChange={(e) => setKnobValue(e.value)} showValue={false} />

<Tooltip target=".slider>.p-slider-handle" content={`${sliderValue}%`} position="top" event="focus" />
<Slider className="slider" value={sliderValue} onChange={(e) => setSliderValue(e.value)} style={{ width: '14rem' }} />
         

Disabled elements do not trigger user interactions due to standard behavior. A common workaround for such cases is wrapping the disabled element with another element that has a tooltip attached. If the tooltip is built-in to the component then enable showOnDisabled option instead.


<Tooltip target=".disabled-button" />
<span className="disabled-button" data-pr-tooltip="Disabled">
    <Button type="button" label="Save" icon="pi pi-check" disabled />
</span>

<Button type="button" label="Save" icon="pi pi-check" disabled tooltip="Disabled" tooltipOptions={{ showOnDisabled: true }} />
         

Adding delays to the show and hide events are defined with showDelay and hideDelay options respectively.


<InputText type="text" placeholder="Delayed" tooltip="Enter your username" tooltipOptions={{ showDelay: 1000, hideDelay: 300 }} />
         

Following is the list of structural style classes

NameElement
p-tooltipContainer element
p-tooltip-arrowArrow of the tooltip
p-tooltip-textText of the tooltip
Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

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

KeyFunction
escapeCloses the tooltip when focus is on the target.
Visit the API documentation for detailed information about all the properties, events and methods of the component.