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

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.


<InputText type="text" placeholder="autoHide: false" tooltip="Enter your username" tooltipOptions={{ autoHide: false }} />
<InputText type="text" placeholder="autoHide: true" tooltip="Enter your username" />

Delay#

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


<Button tooltip="Confirm to proceed" tooltipOptions={{ showDelay: 1000, hideDelay: 300 }} label="Save" />

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

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

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

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.