Tooltip Implementation in Jetpack Compose

Tooltips provide helpful context for UI elements. Compose offers both plain and rich tooltip options for different use cases.

Plain Tooltip

The simplest tooltip implementation:

@Composable
fun PlainTooltipExample() {
    var showTooltip by remember { mutableStateOf(false) }

    TooltipBox(
        positionProvider = TooltipDefaults.rememberPlainTooltipPositionProvider(),
        tooltip = {
            PlainTooltip {
                Text("This is a helpful hint")
            }
        },
        state = rememberTooltipState()
    ) {
        Icon(
            imageVector = Icons.Default.Info,
            contentDescription = "Information",
            modifier = Modifier.pointerInput(Unit) {
                awaitEachGesture {
                    awaitFirstDown()
                    showTooltip = true
                }
            }
        )
    }
}

Rich Tooltip with Styling

Rich tooltips support more complex content:

@Composable
fun RichTooltipExample() {
    TooltipBox(
        positionProvider = TooltipDefaults.rememberRichTooltipPositionProvider(),
        tooltip = {
            RichTooltip(
                title = { Text("Feature Tip") },
                action = { Button(onClick = {}) { Text("Learn More") } }
            ) {
                Text("This feature helps you do X more efficiently")
            }
        },
        state = rememberTooltipState()
    ) {
        Button(onClick = {}) {
            Text("Hover over me")
        }
    }
}

Custom Tooltip Styling

Create tooltips matching your app's design:

@Composable
fun CustomTooltip() {
    TooltipBox(
        tooltip = {
            Surface(
                shape = RoundedCornerShape(8.dp),
                color = Color.DarkGray,
                shadowElevation = 4.dp
            ) {
                Text(
                    "Custom tooltip",
                    color = Color.White,
                    modifier = Modifier.padding(12.dp)
                )
            }
        },
        state = rememberTooltipState()
    ) {
        Icon(Icons.Default.Help, contentDescription = "Help")
    }
}

Tooltips improve discoverability and user guidance without cluttering your UI.

---

8 Android app templates available on Gumroad