Skip to content

Tooltip Material Component for Jetpack Compose

Introduction

Tooltips are essential UI components that provide additional information when users hover or long-press on a UI element. In Jetpack Compose, the Material Design library offers a Tooltip component, enabling developers to enhance the user experience with informative overlays.

In this post, we'll explore two types of tooltips in Jetpack Compose:

  • Plain Tooltip: A simple text-based tooltip.
  • Rich Tooltip: A tooltip that supports rich content such as images, buttons, and more.

Let's dive into how to implement both!

1. Adding Dependencies

Before using tooltips, ensure you have the necessary Material components in your build.gradle:

implementation("androidx.compose.material3:material3:<latest-version>")

Replace <latest-version> with the latest version of the Material 3 library.

2. Plain Tooltip in Jetpack Compose

A plain tooltip is a simple text tooltip that appears when a user interacts with a UI element, like a button.

Example Code:

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun PlainTooltip() {
    val scope = rememberCoroutineScope()
    val plainTooltipState = rememberTooltipState()
    TooltipBox(
        positionProvider = TooltipDefaults.rememberPlainTooltipPositionProvider(),
        tooltip = {
            PlainTooltip {
                Text("A plain tooltip is a simple text tooltip that appears when a user")
            }
        },
        state = plainTooltipState
    ) {
        Button(onClick = {
            scope.launch {
                plainTooltipState.show()
            }

        }) {
            Text("Show Plain Tooltip")
        }
    }
}

Key Points:

  • TooltipBox is the container for the tooltip.
  • rememberTooltipState() manages the tooltip's state.
  • TooltipDefaults.rememberPlainTooltipPositionProvider() determines its position.
  • A simple Text composable is used inside the tooltip.

Plain Tooltip Preview:

Plain Tooltip

3. Rich Tooltip in Jetpack Compose

A rich tooltip can contain formatted text, images, buttons, or other interactive elements.

Example Code:

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun RichTooltip(modifier: Modifier = Modifier) {

    val scope = rememberCoroutineScope()
    val richTooltipState = rememberTooltipState()

    TooltipBox(
        positionProvider = TooltipDefaults.rememberRichTooltipPositionProvider(),
        tooltip = {
            RichTooltip(
                title = {
                    Text("Rich Tooltip")
                },
                text = {
                    // 50 char text
                    Text("A rich tooltip can contain formatted text, images, buttons, or other interactive elements.")
                },
                action = {
                    IconButton(onClick = {
                        scope.launch {
                            richTooltipState.dismiss()
                        }
                    }
                    ) {
                        Text("Close")
                    }

                })
        },
        state = richTooltipState
    )
    {
        Button(onClick = {
            scope.launch {
                richTooltipState.show()
            }

        }) {
            Text("Show Rich Tooltip")
        }
    }
}

Key Points:

  • TooltipDefaults.rememberRichTooltipPositionProvider() is used for rich tooltips.
  • Supports multiple composables like Text, Button, and Column.
  • Can include user interactions within the tooltip.

Rich Tooltip Preview:

Rich Tooltip

4. When to Use Tooltips

Tooltips improve UX when used appropriately. Here are some best practices: - Use tooltips for non-obvious UI elements: Icons or buttons without labels benefit from tooltips. - Avoid excessive tooltips: Overuse can clutter the UI. - Ensure tooltips are accessible: Provide an alternative for screen readers.

Conclusion

Jetpack Compose provides powerful tooltip components to enhance user experience. Whether you need a simple plain tooltip for quick hints or a rich tooltip for detailed information, Compose makes it easy to implement.

✅ Key Takeaways:

  • Use TooltipBox for displaying tooltips.
  • rememberTooltipState() manages tooltip visibility.
  • Choose between rememberPlainTooltipPositionProvider() and rememberRichTooltipPositionProvider() based on your needs.

Now, try integrating tooltips into your Jetpack Compose project and elevate your app’s usability!

📌 GitHub Sample Code:

Check out the complete working example on GitHub: GitHub Sample Code 🎯

I hope this guide helps! Let me know if you have any questions in the comments below. 🚀