Tooltip Component

The Tooltip component displays additional information when users hover, click, or focus on an element. It supports various positions, animations, and customization options.

Usage

To import and use the Tooltip component in your application, use the following code snippet:

Demos

Explore the demos of the React Tooltip component. Refer to this page.

Props

The following table outlines the props for the Tooltip component:

NameTypeDefaultDescription
animation
TooltipAnimationOptions
{ open: { effect: 'FadeIn', duration: 150, delay: 0 }, close: { effect: 'FadeOut', duration: 150, delay: 0 } }

Specifies the same or different animation options to Tooltip while it is in open or close state.

arrow
boolean
true

Shows or hides the tip pointer of Tooltip.

arrowPosition
TipPointerPosition
'Auto'

Specifies the position of tip pointer on Tooltip.

closeDelay
number
0

Closes the Tooltip after the specified delay in milliseconds.

container
React.RefObject<HTMLElement>
'body'

Specifies the container element in which the Tooltip's pop-up will be appended.

content
node | Function
-

Specifies the content of the Tooltip.

followCursor
boolean
false

Allows the Tooltip to follow the mouse pointer movement over the specified target element.

height
string | number
'auto'

Specifies the height of the Tooltip component.

offsetX
number
0

Specifies the space between the target and Tooltip element in X axis.

offsetY
number
0

Specifies the space between the target and Tooltip element in Y axis.

open
boolean
false

Determines whether the Tooltip is open or closed. When set to true, the Tooltip will be displayed; when false, it will be hidden.

openDelay
number
0

Opens the Tooltip after the specified delay in milliseconds.

opensOn
string
'Auto'

Specifies the device mode to display the Tooltip content. Set of open modes available for Tooltip.

  • Auto :- The Tooltip opens automatically when the trigger element is hovered over.
  • Hover :- The Tooltip opens when the trigger element is hovered over.
  • Click :- The Tooltip opens when the trigger element is clicked.
  • Focus :- The Tooltip opens when the trigger element is focused.
  • Custom :- The Tooltip opens when the trigger element is triggered by a custom event.
position
Position
'TopCenter'

Specifies the position of the Tooltip element with respect to the target element.

sticky
boolean
false

Displays the Tooltip in an open state until closed manually.

target
React.RefObject<HTMLElement>
-

Specifies the target where the Tooltip needs to be displayed.

width
string | number
'auto'

Specifies the width of the Tooltip component.

windowCollision
boolean
false

Specifies the collision target element as page viewport (window) or Tooltip element.

Methods

The following table outlines the methods for the Tooltip component:

NameParametersReturnsDescription
closeTooltip

  • animationSettings?

    : TooltipAnimationProps
    • void

    Hides the Tooltip with specific animation effect.


    Params:
  • animationSettings: Sets the specific animation when hiding Tooltip from the screen. (Optional)
    • openTooltip

  • element?

    : HTMLElement

  • animationSettings?

    : TooltipAnimationProps
    • void

    Shows the Tooltip on the specified target with specific animation settings.


    Params:
  • element: Target element where the Tooltip is to be displayed. (Optional)
  • animationSettings: Sets the specific animation, while showing the Tooltip on the screen. (Optional)
    • refresh
    -
    void

    Refreshes the Tooltip content and its position.

    Events

    The following table outlines the events for the Tooltip component:

    NameTypeDescription
    onClose
    (event: Event) => void

    Triggers before the Tooltip hides from the screen.

    onFilterTarget
    (event: HTMLElement) => boolean

    Specifies a callback function that determines the target elements on which the Tooltip should be displayed. This can be used for showing Tooltip with multiple targets.

    onOpen
    (event: Event) => void

    Triggers before the Tooltip is displayed over the target element.