](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes) 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)`	❌

{% hint style="info" %} You can either pass a string, or a complete complex HTML structure to the tooltip component. {% endhint %}

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