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.
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.
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
Last updated