> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowx.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Tooltip

> A UI component that displays additional context on hover or focus, with configurable icon and content.

## Overview

A Tooltip is a thin contextual hint anchored to an icon. Use it to explain a non-obvious field label, surface a regulatory disclaimer next to a control, or expand on an acronym without taking screen space.

The icon is configurable from the theme, the trigger is hover or focus, and the overlay positions itself automatically to stay on screen.

The Tooltip is allowed inside any container component (Card, Container, Collection) as well as inside chat layouts and process screens.

## Properties

| Property            | Type                | Description                                                                                           |
| ------------------- | ------------------- | ----------------------------------------------------------------------------------------------------- |
| **Content**         | String / expression | Tooltip text. Bind to a process data key for dynamic content, or set a static literal.                |
| **Visibility**      | Expression          | JavaScript expression that hides the Tooltip when truthy.                                             |
| **Theme overrides** | Object              | Override icon, colours, font, padding, border, max-width, max-rows, or shadow for this instance only. |

## Process data binding

To drive Tooltip content from process data, bind **Content** to a process data key:

```javascript theme={"system"}
${application.help.fieldExplanation}
```

For static content, set **Content** to a string literal — for example, `"Your IBAN is shown as it appears on your bank statement."`.

See [Dynamic and computed values](../dynamic-and-computed-values) for the full expression syntax.

## Theme configuration

Defaults from the platform theme:

| Token                                                        | Default                      | Description                                                   |
| ------------------------------------------------------------ | ---------------------------- | ------------------------------------------------------------- |
| `paddingTop`, `paddingRight`, `paddingBottom`, `paddingLeft` | `8px` each                   | Inner padding around the tooltip content.                     |
| `font`                                                       | `typography@Caption#regular` | Body typography.                                              |
| `color`                                                      | `color@neutrals#500`         | Text colour.                                                  |
| `backgroundColor`                                            | `color@shades#100`           | Tooltip background.                                           |
| `borderColor`                                                | `color@neutrals#200`         | Outline colour.                                               |
| `borderWidth`                                                | `1px`                        | Outline thickness.                                            |
| `borderRadius`                                               | `8px`                        | Corner radius.                                                |
| `maxWidth`                                                   | `360px`                      | Maximum overlay width before text wraps.                      |
| `maxRows`                                                    | `5`                          | Maximum text rows before truncation.                          |
| `iconColor`                                                  | `color@neutrals#500`         | Trigger icon colour.                                          |
| `shadow`                                                     | `shadow@s`                   | Drop shadow on the overlay.                                   |
| `tooltipIcon` (icon)                                         | `sys_TooltipInfo_16`         | Trigger icon. Replace via the theme to use a different glyph. |

To override globally, edit **Theme → Components → Tooltip** in the Designer.

## Related resources

<CardGroup cols={2}>
  <Card title="UI Designer overview" icon="palette" href="../ui-designer">
    Compose screens in the UI Designer.
  </Card>

  <Card title="Conditional styling" icon="wand-magic-sparkles" href="../conditional-styling">
    Apply dynamic styles to UI components.
  </Card>
</CardGroup>