lara-light-indigo

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.


<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
NameTypeDefaultDescription
idstringnullUnique identifier of the element.
disabledbooleanfalseWhen present, it specifies that the tooltip should be hidden.
classNamestringnullStyle class of the tooltip.
stylestringnullStyle of the tooltip.
appendToDOM element | stringdocument.bodyDOM 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.
positionstringrightPosition of the tooltip, valid values are right, left, top and bottom.
mystringnullDefines which position on the tooltip being positioned to align with the target element.
atstringnullDefines which position on the target element to align the positioned tooltip.
eventstringhoverEvent to show the tooltip, valid values are hover and focus.
showEventstringmouseenterEvent to show the tooltip if the event property is empty.
hideEventstringmouseleaveEvent to hide the tooltip if the event property is empty.
autoZIndexbooleantrueWhether to automatically manage layering.
baseZIndexnumber0Base zIndex value to use in layering.
mouseTrackbooleanfalseWhether the tooltip will follow the mouse.
mouseTrackTopnumber5Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.
mouseTrackLeftnumber5Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.
showDelaynumber0Delay to show the tooltip in milliseconds.
updateDelaynumber0Delay to update the tooltip in milliseconds.
hideDelaynumber0Delay to hide the tooltip in milliseconds.
autoHidebooleantrueWhether to hide tooltip when hovering over tooltip content.
showOnDisabledbooleanfalseWhether to show tooltip for disabled elements.
onBeforeShowfunctionnullCallback to invoke before the tooltip is shown.
onBeforeHidefunctionnullCallback to invoke before the tooltip is hidden.
onShowfunctionnullCallback to invoke when the tooltip is shown.
onHidefunctionnullCallback 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
NameTypeDefaultDescription
data-pr-tooltipstringnullContent of the tooltip.
data-pr-disabledbooleanfalseWhen present, it specifies that the tooltip should be hidden.
data-pr-classnamestringnullStyle class of the tooltip.
data-pr-positionstringrightPosition of the tooltip, valid values are right, left, top and bottom.
data-pr-mystringnullDefines which position on the tooltip being positioned to align with the target element.
data-pr-atstringnullDefines which position on the target element to align the positioned tooltip.
data-pr-eventstringhoverEvent to show the tooltip, valid values are hover and focus.
data-pr-showeventstringmouseenterEvent to show the tooltip if the event property is empty.
data-pr-hideeventstringmouseleaveEvent to hide the tooltip if the event property is empty.
data-pr-mousetrackbooleanfalseWhether the tooltip will follow the mouse.
data-pr-mousetracktopnumber5Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.
data-pr-mousetrackleftnumber5Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.
data-pr-showdelaynumber0Delay to show the tooltip in milliseconds.
data-pr-updatedelaynumber0Delay to update the tooltip in milliseconds.
data-pr-hidedelaynumber0Delay to hide the tooltip in milliseconds.
data-pr-autohidebooleantrueWhether to hide tooltip when hovering over tooltip content.
data-pr-showondisabledbooleanfalseWhether to show tooltip for disabled elements.
Tooltip Component Properties

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

NameTypeDefaultDescription
targetselector or DOM elementnullTarget element on global tooltip option.

<Tooltip target=".customClassName" mouseTrack mouseTrackLeft={10} showDelay={100}/>
 
Methods
NameParametersDescription
updateTargetEventstarget: 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.
loadTargetEventstarget: target element. (Default: current target)Used to load target events.
unloadTargetEventstarget: target element. (Default: current target)Used to unload target events.
Styling

Following is the list of structural style classes

NameElement
p-tooltipContainer element
p-tooltip-arrowArrow of the tooltip
p-tooltip-textText of the tooltip
Dependencies

None.

Component Scale

Input Style

Ripple Effect

Free Themes

Built-in component themes created by the PrimeReact Theme Designer.

Bootstrap
Blue
Purple
Blue
Purple
Material Design
Indigo
Deep Purple
Indigo
Deep Purple
Material Design Compact
Indigo
Deep Purple
Indigo
Deep Purple
Tailwind
Tailwind Light
Fluent UI
Blue
PrimeOne Design - 2022 NEW
Lara Indigo
Lara Blue
Lara Purple
Lara Teal
Lara Indigo
Lara Blue
Lara Purple
Lara Teal
PrimeOne Design - 2021
Saga Blue
Saga Green
Saga Orange
Saga Purple
Vela Blue
Vela Green
Vela Orange
Vela Purple
Arya Blue
Arya Green
Arya Orange
Arya Purple
Premium Themes

Premium themes are only available exclusively for PrimeReact Theme Designer subscribers and therefore not included in PrimeReact core.

Soho Light
Soho Dark
Viva Light
Viva Dark
Mira
Nano

Legacy Free Themes

Nova
Nova Alt
Nova Accent
Luna Blue
Luna Green
Luna Amber
Luna Pink
Rhea

Premium Create-React-App Templates

Beautifully crafted premium create-react-app application templates by the PrimeTek design team.

Sakai
Atlantis
Freya
Ultima
Diamond
Sapphire
Serenity
Babylon
Avalon
Apollo
Roma