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.
Available starting with FlowX.AI 5.8.0The Tooltip surfaces a small overlay of contextual help when the user hovers or focuses an icon. Use it for inline explanations that don’t justify a separate field or label.
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:"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. |
Related resources
UI Designer overview
Compose screens in the UI Designer.
Conditional styling
Apply dynamic styles to UI components.