Skip to content

Extra

Tooltip

A FormaUI tooltip — "Material 3 with better defaults", wrapping Material 3's TooltipBox + PlainTooltip/RichTooltip.

dev.formaui.components.tooltip

PlainRich

Preview

This toggle is site chrome only — the preview has its own light/dark switch inside.

Live preview

Live preview — ~37 MB development build

Usage

val tooltipState = rememberTooltipState()
FormaTooltip(
    text = "Search",
    state = tooltipState,
) {
    FormaIconButton(onClick = { }) { Text("🔍") }
}

FormaTooltip

Tooltip anchored to its content slot, triggered on long-press/hover; Plain or Rich (title + action) via variant, caret on by default.

textrequiredTypeStringDefaultrequiredDescriptionthe tooltip's message.
modifierTypeModifierDefaultModifierDescriptionthe Modifier applied to the anchor (content).
variantTypeFormaTooltipVariantDefaultFormaTooltipVariant.PlainDescriptionthe tooltip surface (defaults to FormaTooltipVariant.Plain).
stateTypeTooltipStateDefaultrememberTooltipState()Descriptionhoisted visibility state; controls and reports whether the tooltip is currently shown (defaults to a freshly remembered, non-persistent TooltipState).
titleType(@Composable () -> Unit)?DefaultnullDescriptionan optional title shown above text. Only used when variant is FormaTooltipVariant.Rich; ignored for FormaTooltipVariant.Plain.
actionType(@Composable () -> Unit)?DefaultnullDescriptionan optional action (typically a TextButton) shown below text. Only used when variant is FormaTooltipVariant.Rich; ignored for Plain. When non-null, the tooltip becomes persistent-friendly: Material 3 keeps it focusable so accessibility services can reach the action.
showCaretTypeBooleanDefaulttrueDescriptionwhether a caret pointing at the anchor is drawn on the tooltip container. FormaUI defaults this to true (Material 3's own default is no caret) since it makes the anchor relationship unambiguous.
positionProviderTypePopupPositionProvider?DefaultnullDescriptioncontrols where the tooltip is placed relative to content. When null, it is placed above the anchor via TooltipDefaults.rememberTooltipPositionProvider.
onDismissRequestType(() -> Unit)?DefaultnullDescriptioncalled when the user clicks outside the tooltip while it is shown. When null, Material 3's default dismiss-on-outside-click behavior applies.
enableUserInputTypeBooleanDefaulttrueDescriptionwhether long-press and hover on content trigger the tooltip through state. Set to false if you drive state entirely programmatically.
colorsTypeRichTooltipColors?DefaultnullDescriptionthe container/content/title/action colors used by FormaTooltipVariant.Rich. When null, the Material 3 default rich tooltip colors are used. Has no effect on FormaTooltipVariant.Plain.
containerColorTypeColorDefaultTooltipDefaults.plainTooltipContainerColorDescriptionthe tooltip's background color for FormaTooltipVariant.Plain (defaults to the M3 plain-tooltip container). No effect on Rich — use colors there.
contentColorTypeColorDefaultTooltipDefaults.plainTooltipContentColorDescriptionthe tooltip's content color for FormaTooltipVariant.Plain (defaults to the M3 plain-tooltip content color). No effect on Rich — use colors there.
textStyleTypeTextStyle?DefaultnullDescriptionoptional TextStyle override for the tooltip's body text (both variants), merged on top of the M3 tooltip body style.
contentrequiredType@Composable () -> UnitDefaultrequiredDescriptionthe anchor content that the tooltip attaches to.

Supporting API

FormaTooltipVariantenum
Visual weight; values: Plain (single line of supporting text), Rich (larger surface with optional title and action).
FormaTooltipDefaultsobject
Default values: caretShape, plainMaxWidth, richMaxWidth.

Accessibility

When a Rich tooltip has a non-null action, Material 3 keeps the tooltip focusable so accessibility services can reach the action; triggered by long-press or hover on the anchor.