# Tooltip

## Overview

<figure><img src="/files/SJovXmXMBvOscwhVkXmH" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

Tooltips are used to provide contextual information or explanations about an element when users interact with it. They are ideal for offering hints, definitions, or additional details that may not be immediately visible, enhancing the user experience by providing on-demand assistance without adding clutter to the interface.

### How it works

A tooltip component appears as a small box with text when a user hovers over, focuses on, or taps an element. It typically displays a brief description or hint related to the element. Tooltips can be positioned in various directions relative to the element and may include headers for structured information when needed.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-tooltip
    title_text="Tooltip"
    description="This is a tooltip description."
    position="top"
    custom_class=""
    component_mode=""
    >
    <button>Hover me</button>
</dda-tooltip>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaTooltip
    title_text="Tooltip"
    description="This is a tooltip description."
    position="top"
    custom_class=""
    component_mode=""
    >
    <button>Hover me</button>
</DdaTooltip>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaTooltip
    title_text="Tooltip"
    description="This is a tooltip description."
    position="top"
    custom_class=""
    component_mode=""
    >
    <button>Hover me</button>
</DdaTooltip>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-tooltip
    title_text="Tooltip"
    description="This is a tooltip description."
    position="top"
    custom_class=""
    component_mode=""
    >
    <button>Hover me</button>
</dda-tooltip>
```

{% endtab %}
{% endtabs %}

### Properties

| Property         | Description                                                                                                                                                                                                                                                                                                                                                                                 | Type                                     |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- |
| `component_mode` | Can be used to apply specific styles or behavior to the tooltip based on different UI modes. Example: Light mode, dark mode, or any other custom mode that affects appearance.                                                                                                                                                                                                              | `string`                                 |
| `custom_class`   | Allows adding a custom CSS class to the tooltip container for additional styling.                                                                                                                                                                                                                                                                                                           | `string`                                 |
| `description`    | A brief explanatory text shown inside the tooltip along with the title.                                                                                                                                                                                                                                                                                                                     | `string`                                 |
| `position`       | <p></p><p>Determines where the tooltip appears relative to the element it is attached to.</p><ul><li><code>'top'</code>: Tooltip appears above the element.</li><li><code>'bottom'</code>: Tooltip appears below the element.</li><li><code>'left'</code>: Tooltip appears to the left of the element.</li><li><code>'right'</code>: Tooltip appears to the right of the element.</li></ul> | `"bottom" \| "left" \| "right" \| "top"` |
| `title_text`     | The title of the tooltip that appears when the user hovers over the component. It is displayed in bold.                                                                                                                                                                                                                                                                                     | `string`                                 |

## Anatomy

<figure><img src="/files/V8IJsnC8OvoPBx8dupP3" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Label**: The text or content inside the tooltip that provides information or guidance to the user.

**Container**: The box that surrounds the label, giving it a distinct background to stand out from the rest of the interface.

**Pointer**: A small triangular element that visually links the tooltip container to the element it describes or provides context for.

## Dos and Don'ts

| Dos                                                              | Don'ts                                                                              |
| ---------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
| Use tooltips to provide additional information or context.       | Don't use tooltips for essential information that must always be visible.           |
| Keep tooltip text concise and to the point.                      | Avoid long paragraphs or overly detailed information in tooltips.                   |
| Ensure tooltips are easily visible and readable.                 | Don't place tooltips in positions where they might be obscured or difficult to see. |
| Use consistent styling for all tooltips in the application.      | Don't use inconsistent styles that may confuse users.                               |
| Provide clear visual indicators for elements that have tooltips. | Don't leave users guessing whether an element has a tooltip or not.                 |
| Ensure tooltips are accessible via keyboard navigation.          | Don't make tooltips accessible only via mouse interactions.                         |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://designsystem.dubai.ae/components/tooltip.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.