React Tooltip functionality is integrated within various PrimeReact components.
Setup
Refer to PrimeReact setup documentation for download and installation steps for your environment.
Import
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.
<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}}/>
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" alt="logo" src="showcase/images/logo.png" height="80px"/>
<div className="customClassName" data-pr-tooltip="This is a div element" style={{ width: '50px', height: '50px', border: '1px solid black' }} />
Theming
Tooltip supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.
Resources
Visit the PrimeReact Tooltip showcase for demos and documentation.