TooltipBox in Compose Multiplatform for Android and iOS

Introduction

Enhance the onboarding journey of your Android and iOS applications with CMPTooltipBox, a powerful library designed to streamline user guidance. Leveraging the capabilities of Compose Multiplatform, CMPTooltipBox empowers you to highlight critical app features seamlessly. With customizable overlays and interactive tutorials, CMPTooltipBox offers a polished and engaging approach to onboard users through your app’s core functionalities. Integration is effortless, thanks to its availability on Maven Central.

Key Features of CMPTooltip

• Pinpoint Key UI Elements: Direct users’ attention to important app features by highlighting specific UI components.
• Tailored Overlays: Customize the appearance of guide overlays to align with your app’s branding and aesthetics.
• Interactive Guidance: Craft step-by-step tutorials that respond to user interactions, ensuring effective utilization of your app’s features.
• Composable Functions: Harness the flexibility of Compose’s composable functions to create modular and reusable onboarding components.

Getting Started with CMPTooltipBox

To begin using CMPTooltipBox in your Compose Multiplatform project, follow these steps:

1. Add the Dependency

dependencies {
    implementation("network.chaintech:cmp-tooltip:1.0.0")
}

2. Define Your CMPTooltipBox Components

Incorporate the CMPTooltipBox component into your composable function. This component controls the presentation of the tooltip and manages the TooltipBoxState.

var showTooltip by remember { mutableStateOf(false) }
val tooltipState = rememberTooltipBoxState()

CMPTooltipBox(
   state = tooltipState,
   showTooltip = showTooltip,
   onTooltipCompleted = {
       showTooltip = false
   }
) {
    // Your main UI content goes here
}

3. Utilizing CMPTooltipBox for Enhanced User Guidance

To leverage the CMPTooltipBox library effectively in your Android and iOS apps, you can utilize various methods tailored to different use cases. Here’s a breakdown of how to use each method:

1. Simple Tooltip

The markForSimpleTooltip method provides a straightforward way to display a tooltip with a title and description.

• index: An integer value representing the index of the tooltip. This is useful when you have multiple tooltips on the same screen.
• title: A string representing the title of the tooltip. This text is displayed prominently to indicate the purpose of the UI element.
• description: A string providing additional information or instructions about the UI element. It appears as supplementary text in the tooltip.
• tooltipBoxConfig: An optional parameter allowing you to customize the appearance and behavior of the tooltip box. In this example, it specifies the background color of the tooltip box.

Example Usage:

IconButton(
    onClick = { /* Handle menu icon click */ },
    modifier = Modifier
      .markForSimpleTooltip(
          index = 0,
          title = "Menu",
          description = "Click here to open the menu",
          tooltipBoxConfig = TooltipBoxConfig(
              backgroundColor = Color.White,
              // Customize other tooltip properties as needed
          )
      )
) {
    Icon(Icons.Filled.Menu, contentDescription = "Menu")
}

2. Tooltip with Button

The markForButtonTooltipBox method enables you to show a tooltip with title, description, button title, and custom button content. Depending on the parameters provided, either a default button or custom button content will be displayed:

• index: A unique identifier to distinguish the tooltip box within a list or sequence.
• tooltipBoxConfig: Optional configuration for the tooltip box. If left null, default configurations will be applied.
• title: The title text displayed in the tooltip, providing users with essential information about the UI element.
• description: An optional description text providing additional context or instructions.
• buttonTitle: An optional title text for the default button in the tooltip. Provide this to display a default button.
• buttonClickEvent: An optional lambda function executed when the default button is clicked. Should be provided along with buttonTitle.
• customButtonContent: An optional composable lambda to provide custom content for the button. Provide this to display custom button content. If both buttonTitle and customButtonContent are provided, the customButtonContent will be used.

Example Usage:

IconButton(
    onClick = { /* Handle menu icon click */ },
    modifier = Modifier.markForButtonTooltipBox(
        index = 0,
        title = "Menu",
        description = "Click here to open the menu",
        buttonTitle = "OK",
        buttonClickEvent = {
            // Handle button click event
        },
        tooltipBoxConfig = TooltipBoxConfig(
            backgroundColor = Color.White,
        )
    )
) {
    Icon(Icons.Filled.Menu, contentDescription = "Menu")
}

3. Tooltip with Image

With markForImageTooltipBox, you can include title, description, image name, and custom image content. Depending on the parameters provided, either a default image or custom image content will be displayed:

• index: A unique identifier to distinguish the tooltip box within a list or sequence.
• tooltipBoxConfig: Optional configuration for the tooltip box. If left null, default configurations will be applied.
• title: The title text displayed in the tooltip, offering users essential information about the UI element.
• description: An optional description text providing additional context or instructions.
• imageName: An optional drawable resource for the default image to be displayed in the tooltip. Provide this to display a default image.
• customImageContent: An optional composable lambda to provide custom content for the image. Provide this to display custom image content. If both imageName and customImageContent are provided, the customImageContent will be used.

Example Usage:

IconButton(
    onClick = { /* Handle menu icon click */ },
    modifier = Modifier.markForImageTooltipBox(
        index = 0,
        title = "Menu",
        description = "Click here to open the menu",
        imageName = R.drawable.menu_icon,
        tooltipBoxConfig = TooltipBoxConfig(
            backgroundColor = Color.White,
        )
    )
) {
    Icon(Icons.Filled.Menu, contentDescription = "Menu")
}

4. Tooltip with Button and Image

Utilize the markForTooltipWithButtonAndImage extension function to designate UI elements for displaying tooltip boxes with images and buttons. This function offers comprehensive configuration options, allowing you to specify the title, description, image, default button with title, and button click event for the tooltip box.

• index: Use this parameter to assign a unique identifier to each tooltip box, allowing for easy differentiation within a list or sequence of UI elements.
• tooltipBoxConfig: Leverage this parameter to specify optional configuration settings for the tooltip box. If left null, default configurations will be applied, ensuring consistency across your app’s UI. Customize properties such as background color, arrow direction, size, and color to align with your app’s design language.
• title: Define the title text to be displayed within the tooltip box, providing users with clear and concise information about the associated UI element or functionality.
• description: Provide a description text to accompany the title within the tooltip box, offering additional context or instructions to users.
• imageName: Specify the drawable resource for the image to be displayed within the tooltip box, enhancing visual appeal and aiding in comprehension.
• buttonTitle: Include a title text for a button within the tooltip box, enabling users to perform actions or navigate to specific features directly from the tooltip.
• buttonClickEvent: Define a lambda function to be executed when the button within the tooltip box is clicked, facilitating seamless interaction and user engagement.

Example Usage:

IconButton(
    onClick = { /* Handle menu icon click */ },
    modifier = Modifier.markForTooltipWithButtonAndImage(
        index = 0,
        title = "Menu",
        description = "Click here to open the menu",
        imageName = R.drawable.menu_icon,
        buttonTitle = "OK",
        buttonClickEvent = {
            // Handle button click event
        },
        tooltipBoxConfig = TooltipBoxConfig(
            backgroundColor = Color.White,
        )
    )
) {
    Icon(Icons.Filled.Menu, contentDescription = "Menu")
}

5. Custom Tooltip Content

With applyCustomTooltipBox you can include custom content for the tooltip box, allowing for the seamless integration of bespoke UI elements:

• index: A unique identifier to distinguish the tooltip box within a list or sequence.
• tooltipBoxConfig: Optional configuration for the tooltip box. If left null, default configurations will be applied, ensuring consistency across your app’s UI.
• content: An optional composable lambda to provide custom content for the tooltip box. By leveraging this parameter, you can unleash your creativity and incorporate tailor-made UI elements into the tooltip box, ranging from text and icons to interactive components.

Example Usage:

IconButton(
    onClick = { /* Handle menu icon click */ },
    modifier = Modifier.applyCustomTooltipBox(
        index = 0,
        tooltipBoxConfig = TooltipBoxConfig(
            backgroundColor = Color.White,
            arrowDirection = TooltipBoxArrowDirection.Top,
            arrowHeadSize = 25f,
            arrowColor = Color.White,
            // Customize other tooltip properties as needed
        ),
        content = {
            Text(
                text = "Custom Tooltip Content",
                color = Color.Black,
                fontSize = 16.sp,
                fontWeight = FontWeight.Bold,
                textAlign = TextAlign.Center
            )
        }
    )
) {
    Icon(Icons.Filled.Menu, contentDescription = "Menu")
}

Screenshot

Conclusion

By following these steps, you can effectively integrate the CMPTooltipBox component into your Compose Multiplatform application. This setup allows you to highlight important UI components and guide users through the essential features of your app, ensuring they can easily navigate and utilize your app's functionalities. With CMPTooltipBox, you can seamlessly incorporate tooltips into your UI, providing users with valuable information and enhancing their overall experience.

GitHub - Chaintech-Network/CMP_tooltip

Happy coding ❤

Connect with us 👇

Chaintech Network

Mobile Innovation Network | LinkedIn