Code

The Tooltip component usage and API reference.

API

This component extends the native <div> API. That's why the className prop is not included in the table.

Props	Data Type	Required
children	ReactNode	✅
message	ReactNode	❌
isDisabled	disabled	❌
position	top | bottom | right | left	❌
spacing	number	❌
delayDuration	number (milliseconds)	❌

You can either pass a string, or a complete complex HTML structure to the tooltip component.

children

The children prop of the Tooltip component is an HTML structure or component. This is the element that, when hovered over, will trigger the display of the message.

message

This prop specifies the content that will be displayed when the children element is hovered.

isDisabled

This prop allows you to control the status of the tooltip - whether it should be active or inactive. If the prop isDisabled is set to true, then the tooltip will not be rendered when hovering over the children. It's important to note that this prop only affects the tooltip, not the children component. For instance, if you want to disable a button, you should use the native isDisabled prop of the Button component.

position

The position prop of the Tooltip component specifies the position of the tooltip relative to the children element. It can take one of the listed values on the table. The position of the tooltip determines where it will be displayed in relation to the children element when it is hovered over. Additionally, the Tooltip component has an avoidCollisions prop, which will automatically adjust the position of the tooltip to avoid collision with other elements on the page.

spacing

The spacing prop of the Tooltip component specifies the distance between the tooltip and the children element. This prop can be useful when you want to adjust the positioning of the tooltip, or when you want to add some extra space between the tooltip and the children element for visual purposes. The default value is usually set at 4, but it can be overridden by passing a value to this prop.

delayDuration

The delayDuration prop of the Tooltip component specifies the time delay in milliseconds before the tooltip is displayed when the children element is hovered over. It can take a numeric value representing the delay time in milliseconds. This prop can be useful when you want to add a small delay before the tooltip appears, to avoid the tooltip showing up too quickly when the mouse accidentally hovers over the children element. The default value is 0, but it can be overridden by passing a value to this prop.

Example

Live Demo

Code Sandbox