> ## 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 |
| - | - | - |
| **Tooltip text** | Markdown / expression | Tooltip text, edited in the markdown editor. Inline markdown, such as bold, italics, and links, renders in the tooltip. Bind to a process data key for dynamic content, or type static text. New tooltips start with the text `Text`. |
| **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 **Tooltip Text** to a process data key:

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

For static content, type the text in **Tooltip text**, for example `Your IBAN is shown as it appears on your **bank statement**.` Inline markdown is supported, including links such as `[fees](https://example.com/fees)`. Images aren't shown: their alt text appears instead.

See [Dynamic and computed values](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/dynamic-and-computed-values.md) 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

> [card] [UI Designer overview](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-designer.md)
>
> Compose screens in the UI Designer.

> [card] [Conditional styling](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/conditional-styling.md)
>
> Apply dynamic styles to UI components.


## Related topics

- [Chat component](https://docs.flowx.ai/6.x/ai-platform/chat-component.md)
- [Input field](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/input-form-field.md)
- [Single Select](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/select-form-field.md)
- [Switch](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/switch-form-field.md)
- [FlowX.AI 5.9.0 Release Notes](https://docs.flowx.ai/release-notes/v5.x/v5.9.0-june-2026/v5.9.0-june-2026.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.