Tooltip

Tooltip functionality is integrated within various PrimeReact components.

Positions

Focus and Blur

Dynamic Tooltip

MouseTrack

AutoHide

Template

Disabled Elements

Target

Color

Import to use it as a component


import { Tooltip } from 'primereact/tooltip';

Getting Started

Tooltip functionality is integrated within the the components that have support such as inputtext or buttons. Content is defined with the tooltip property.


<InputText type="text" placeholder="Right" tooltip="Enter your username" />
<Button type="button" label="Save" icon="pi pi-check" tooltip="Click to proceed" />

Position

There are four choices to position the tooltip, default value is "right" and alternatives are "top", "bottom", "left". Position is specified using tooltipOptions property.


<InputText type="text" placeholder="Right" tooltip="Enter your username" tooltipOptions={{position: 'right'}}/>

Events

Tooltip gets displayed on hover event of its target by default, other option is the focus event to display and blur to hide. You can set it to 'both' to allow for both hover and focus events.


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

Delay

Tooltip is displayed or hidden instantly by default however you may add delays using showDelay and hideDelay properties which accept a number value in terms of milliseconds.


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

Disabled Elements

By default disabled elements like button do not trigger user interactions. So for such issues, a disabled element is usually wrapped with an html element like span and the Tooltip wrapper is set to the element. If this operation is requested by the Tooltip component, the showOnDisabled property can be used. This is an optional use.


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

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

Tooltip Options

Name	Type	Default	Description
id	string	null	Unique identifier of the element.
disabled	boolean	false	When present, it specifies that the tooltip should be hidden.
className	string	null	Style class of the tooltip.
style	string	null	Style of the tooltip.
appendTo	DOM element \| string	document.body	DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
position	string	right	Position of the tooltip, valid values are right, left, top and bottom.
my	string	null	Defines which position on the tooltip being positioned to align with the target element.
at	string	null	Defines which position on the target element to align the positioned tooltip.
event	string	hover	Event to show the tooltip, valid values are hover, focus, and both.
showEvent	string	mouseenter	Event to show the tooltip if the event property is empty.
hideEvent	string	mouseleave	Event to hide the tooltip if the event property is empty.
autoZIndex	boolean	true	Whether to automatically manage layering.
baseZIndex	number	0	Base zIndex value to use in layering.
mouseTrack	boolean	false	Whether the tooltip will follow the mouse.
mouseTrackTop	number	5	Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.
mouseTrackLeft	number	5	Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.
showDelay	number	0	Delay to show the tooltip in milliseconds.
updateDelay	number	0	Delay to update the tooltip in milliseconds.
hideDelay	number	0	Delay to hide the tooltip in milliseconds.
autoHide	boolean	true	Whether to hide tooltip when hovering over tooltip content.
showOnDisabled	boolean	false	Whether to show tooltip for disabled elements.
onBeforeShow	function	null	Callback to invoke before the tooltip is shown.
onBeforeHide	function	null	Callback to invoke before the tooltip is hidden.
onShow	function	null	Callback to invoke when the tooltip is shown.
onHide	function	null	Callback to invoke when the tooltip is hidden.

Global Tooltip

It is used to bind the same properties to more than one element. Each element can have its own data-pr-{options} properties. In this way, options can be customized among themselves. Using the data-pr-tooltip property on any element, the text to be displayed in the tooltip is determined. The target property is required for the global tooltip. It can be a selector, DOM element or selector array.


<Tooltip target=".customClassName" mouseTrack mouseTrackLeft={10} />

<img className="customClassName" data-pr-tooltip="PrimeReact-Logo" data-pr-position="left" alt="logo" src="showcase/images/logo.png" height="80px"/>
<div className="customClassName" data-pr-tooltip="This is a div element" data-pr-position="right" style={{ width: '50px', height: '50px', border: '1px solid black' }} />

Custom Content

The tooltip can display custom content by using JSX elements in its children.


<Tooltip target=".customClassName">
    // Content
</Tooltip>

Target Element Options

Name	Type	Default	Description
data-pr-tooltip	string	null	Content of the tooltip.
data-pr-disabled	boolean	false	When present, it specifies that the tooltip should be hidden.
data-pr-classname	string	null	Style class of the tooltip.
data-pr-position	string	right	Position of the tooltip, valid values are right, left, top and bottom.
data-pr-my	string	null	Defines which position on the tooltip being positioned to align with the target element.
data-pr-at	string	null	Defines which position on the target element to align the positioned tooltip.
data-pr-event	string	hover	Event to show the tooltip, valid values are hover and focus.
data-pr-showevent	string	mouseenter	Event to show the tooltip if the event property is empty.
data-pr-hideevent	string	mouseleave	Event to hide the tooltip if the event property is empty.
data-pr-mousetrack	boolean	false	Whether the tooltip will follow the mouse.
data-pr-mousetracktop	number	5	Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.
data-pr-mousetrackleft	number	5	Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.
data-pr-showdelay	number	0	Delay to show the tooltip in milliseconds.
data-pr-updatedelay	number	0	Delay to update the tooltip in milliseconds.
data-pr-hidedelay	number	0	Delay to hide the tooltip in milliseconds.
data-pr-autohide	boolean	true	Whether to hide tooltip when hovering over tooltip content.
data-pr-showondisabled	boolean	false	Whether to show tooltip for disabled elements.

Tooltip Component Properties

All options in Tooltip Options section can be used as a property. In addition;

Name	Type	Default	Description
target	selector or DOM element	null	Target element on global tooltip option.


<Tooltip target=".customClassName" mouseTrack mouseTrackLeft={10} showDelay={100}/>

Methods

Name	Parameters	Description
updateTargetEvents	target: target element. (Default: current target)	Used to reload target events. In some cases, the target element can be hidden initially. Later, when this element becomes visible, it will be necessary to bind tooltip events to this element.
loadTargetEvents	target: target element. (Default: current target)	Used to load target events.
unloadTargetEvents	target: target element. (Default: current target)	Used to unload target events.