---
description: The Tooltip component usage and API reference.
---

# Code

### API

This component extends the native [\<div>](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes) API. That's why the `className` prop is not included in the table.

<table><thead><tr><th>Props</th><th width="364.66666666666663">Data Type</th><th>Required</th></tr></thead><tbody><tr><td><code>children</code></td><td><code>ReactNode</code></td><td>✅</td></tr><tr><td><code>message</code></td><td><code>ReactNode</code></td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td><code>isDisabled</code></td><td><code>disabled</code></td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td><code>position</code></td><td><code>top | bottom | right | left</code></td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td><code>spacing</code></td><td><code>number</code></td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td><code>delayDuration</code></td><td><code>number (milliseconds)</code></td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr></tbody></table>

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

<details>

<summary>children</summary>

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.`

</details>

<details>

<summary>message</summary>

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

</details>

<details>

<summary>isDisabled</summary>

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.**

</details>

<details>

<summary>position</summary>

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.

</details>

<details>

<summary>spacing</summary>

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.

</details>

<details>

<summary>delayDuration</summary>

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.\


</details>

## Example

<table data-view="cards"><thead><tr><th></th><th></th><th></th></tr></thead><tbody><tr><td>Live Demo</td><td><a href="https://codesandbox.io/s/tooltip-4k66zw">Code Sandbox</a></td><td></td></tr></tbody></table>
