Material 3 Tooltips in Jetpack Compose

Get started with Material 3 tooltips in Jetpack Compose to create user-friendly interfaces for adding context to UI elements.

Explore Tooltip Styles

Learn to implement three Material 3 tooltip types for providing context to UI elements.

Plain Tooltip

Briefly describes a UI element.

@Composable
fun PlainTooltipExample(
    modifier: Modifier = Modifier,
    plainTooltipText: String = "Add to favorites"
) {
    // Creates a simple tooltip describing an icon button
    TooltipBox(
        modifier = modifier, // *Required: Customizes tooltip layout
        positionProvider = TooltipDefaults.rememberPlainTooltipPositionProvider(), // *Required: Sets tooltip position
        tooltip = { PlainTooltip { Text(plainTooltipText) } }, // *Required: Defines tooltip content
        state = rememberTooltipState() // *Required: Manages tooltip state
    ) {
        IconButton(onClick = { /* Do something... */ }) {
            Icon(
                imageVector = Icons.Filled.Favorite, // Displays the button icon
                contentDescription = "Add to favorites" // *Required: Describes the icon for accessibility
            )
        }
    }
}
  

Use a Plain Tooltip when you want to describe a UI element briefly.

Examples:

• Describe an icon button in a toolbar
• Explain a menu icon in an app bar
• Label a settings icon in a navigation drawer

---

Rich Tooltip

Provides detailed context for a UI element.

@Composable
fun RichTooltipExample(
    modifier: Modifier = Modifier,
    richTooltipSubheadText: String = "Rich Tooltip",
    richTooltipText: String = "Rich tooltips support multiple lines of informational text."
) {
    // Creates a detailed tooltip with a title
    TooltipBox(
        modifier = modifier, // *Required: Customizes tooltip layout
        positionProvider = TooltipDefaults.rememberRichTooltipPositionProvider(), // *Required: Sets tooltip position
        tooltip = {
            RichTooltip(
                title = { Text(richTooltipSubheadText) } // Displays the tooltip title
            ) {
                Text(richTooltipText) // Displays the tooltip body text
            }
        }, // *Required: Defines tooltip content
        state = rememberTooltipState() // *Required: Manages tooltip state
    ) {
        IconButton(onClick = { /* Icon button's click event */ }) {
            Icon(
                imageVector = Icons.Filled.Info, // Displays the button icon
                contentDescription = "Show more information" // *Required: Describes the icon for accessibility
            )
        }
    }
}
  

Use a Rich Tooltip when you want to provide detailed context for a UI element.

Examples:

• Explain a feature in a settings menu
• Describe a tool’s purpose in a design app
• Detail an icon’s function in a complex interface

---

Advanced Rich Tooltip

Provides detailed context with a title and action.

@Composable
fun AdvancedRichTooltipExample(
    modifier: Modifier = Modifier,
    richTooltipSubheadText: String = "Custom Rich Tooltip",
    richTooltipText: String = "Rich tooltips support multiple lines of informational text.",
    richTooltipActionText: String = "Dismiss"
) {
    // Creates a detailed tooltip with a title, action, and custom arrow
    TooltipBox(
        modifier = modifier, // *Required: Customizes tooltip layout
        positionProvider = TooltipDefaults.rememberRichTooltipPositionProvider(), // *Required: Sets tooltip position
        tooltip = {
            RichTooltip(
                title = { Text(richTooltipSubheadText) }, // Displays the tooltip title
                action = {
                    Row {
                        TextButton(onClick = { /* Handle dismiss action */ }) {
                            Text(richTooltipActionText) // Displays the action button text
                        }
                    }
                }, // Adds an action button
                caretSize = DpSize(32.dp, 16.dp) // Sets the tooltip arrow size
            ) {
                Text(richTooltipText) // Displays the tooltip body text
            }
        }, // *Required: Defines tooltip content
        state = rememberTooltipState() // *Required: Manages tooltip state
    ) {
        IconButton(onClick = { /* Icon button's click event */ }) {
            Icon(
                imageVector = Icons.Filled.Camera, // Displays the button icon
                contentDescription = "Open camera" // *Required: Describes the icon for accessibility
            )
        }
    }
}

Use an Advanced Rich Tooltip when you want to provide detailed context with a title and action.

Examples:

• Explain a camera feature with a dismiss option
• Describe a tool with an action in a photo editor
• Detail a setting with a link in a preferences menu

---

Tooltip Properties

Understand the key properties used in the tooltip examples.

Property	Usage
positionProvider*	Required: Sets the tooltip’s position using TooltipDefaults (e.g., rememberPlainTooltipPositionProvider)
tooltip*	Required: Defines the tooltip’s content using PlainTooltip or RichTooltip
state*	Required: Manages the tooltip’s visibility state using rememberTooltipState
content*	Required: Defines the UI element the tooltip anchors to, typically an IconButton
title	Sets the title text for a RichTooltip
action	Adds an interactive action button to a RichTooltip (e.g., Dismiss)
caretSize	Sets the size of the tooltip’s arrow (e.g., 32.dp width, 16.dp height)
contentDescription*	Required: Describes the icon in the IconButton for accessibility