Tooltip

Tooltip functionality is integrated within various PrimeReact components.

Import#


import { Tooltip } from 'primereact/tooltip';

Position#

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' }} />

Event#

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' }} />

Target#

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>

Mouse Track#

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

Template#

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

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.


<Button type="button" label="Save" icon="pi pi-check" tooltip="Save (autoHide: true)" tooltipOptions={{ position: 'left' }} />

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

Reactive#

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#

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

Delay#

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

Style#

Following is the list of structural style classes

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

Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

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.