Tooltip

A short label or explanation that appears on hover, focus or long press.

When to use

Plain tooltips name an element, usually an icon button. Rich tooltips carry a title, a few lines of text and an optional action.

Hover an icon button with the pointer, focus it with the keyboard or long press it to see the tooltip.

Playground

The interactive page has a playground with live property controls for this component and generated code.

Examples

Plain

Hover or focus the button.

TooltipBox(
    positionProvider = TooltipDefaults.rememberTooltipPositionProvider(TooltipAnchorPosition.Above),
    tooltip = { PlainTooltip { Text("Share this page") } },
    state = rememberTooltipState(),
) {
    IconButton(onClick = {}) {
        Icon(Icons.Rounded.Share, contentDescription = "Share")
    }
}

Rich, with action

Persistent until dismissed.

val state = rememberTooltipState(isPersistent = true)
val scope = rememberCoroutineScope()

TooltipBox(
    positionProvider = TooltipDefaults.rememberTooltipPositionProvider(TooltipAnchorPosition.Above),
    tooltip = {
        RichTooltip(
            title = { Text("Sync") },
            action = { TextButton(onClick = { scope.launch { state.dismiss() } }) { Text("Got it") } },
        ) {
            Text("Changes are saved on this device first and uploaded when you are online.")
        }
    },
    state = state,
    hasAction = true,
) {
    Button(onClick = { scope.launch { state.show() } }) {
        Icon(Icons.Rounded.Info, contentDescription = null)
        Text("About sync")
    }
}

Parameters

NameTypeDefaultDescription
positionProviderPopupPositionProviderUse TooltipDefaults.rememberTooltipPositionProvider(position).
tooltip@Composable TooltipScope.() -> UnitPlainTooltip or RichTooltip.
stateTooltipStaterememberTooltipState(isPersistent = true) keeps a rich tooltip open.
hasActionBooleanfalseSet to true when a rich tooltip contains an action.

Guidelines

Do:

Don't:

Accessibility

Related components