Tooltip

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	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 Tooltip Text to a process data key:

${application.help.fieldExplanation}

For static content, set Tooltip Text to a string literal — for example, "Your IBAN is shown as it appears on your bank statement.". See 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.

UI Designer overview

Compose screens in the UI Designer.

Conditional styling

Apply dynamic styles to UI components.

Last modified on June 29, 2026

Getting Started

Concepts

FlowX.AI Designer

Building projects

Building blocks

Platform deep dive

Resources

API reference

Overview

Properties

Process data binding

Theme configuration

UI Designer overview

Conditional styling

​Overview

​Properties

​Process data binding

​Theme configuration

​Related resources

UI Designer overview

Conditional styling

Overview

Properties

Process data binding

Theme configuration

Related resources