A CMPTooltip is custom tooltip library for Compose Multiplatform for Android and iOS.
- Add the dependency to your
build.gradle.kts
file:
commonMain.dependencies {
implementation("network.chaintech:cmp-tooltip:1.0.0")
}
- Define Your CMPTooltipBox Components
var showTooltip by remember { mutableStateOf(false) }
val tooltipState = rememberTooltipBoxState()
CMPTooltipBox(
state = tooltipState,
showTooltip = showTooltip,
onTooltipCompleted = {
showTooltip = false
}
) {
// Your main UI content goes here
}
- Simple Tooltip:
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")
}
- Tooltip with Button
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")
}
- Tooltip with Image
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")
}
- Tooltip with Button and Image
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")
}
- Custom Tooltip Content
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")
}
-
For Demo Checkout This Class
-
Medium Article for detailed explaination.
-
Connect us on LinkedIn