Cross-platform library for creating customizable tooltips following Material Design principles. Offers multiple positioning options, adjustable appearance, interactive elements, and seamless integration with Material 3 themes.
A Kotlin Multiplatform Material Design Tooltip library for Android and iOS platforms using Jetpack Compose.
KMM Material Tooltip provides a customizable tooltip implementation that follows Material Design principles while working seamlessly across Android and iOS through Kotlin Multiplatform. The library offers various tooltip positions, customizable appearance, and interactive capabilities.
Add the dependency to your shared module's build.gradle.kts:
commonMain.dependencies {
implementation("io.github.zaiddev1996:kmm-material-tooltip:1.0.0")
}
AppTooltip(
state = tooltipState,
content = TooltipContent(
text = StringResource("Custom tooltip with icons"),
leadingIcon = DrawableResource("ic_info"),
trailingIcon = DrawableResource("ic_close"),
textStyle = MaterialTheme.typography.labelMedium,
onLeadingIconClick = { /* Handle leading icon click */ },
onTrailingIconClick = { /* Handle trailing icon click */ }
),
config = TooltipConfig(
horizontalSpacing = 10,
verticalSpacing = 5,
caretWidth = 30f,
caretHeight = ,
caretSpacing =
),
position = TooltipPosition.BottomRight,
radius = TooltipRadius.Small,
onDismiss = { }
) {
}
TooltipPosition.TopLeft: Positions the tooltip at the top-left of the targetTooltipPosition.TopRight: Positions the tooltip at the top-right of the targetTooltipPosition.BottomLeft: Positions the tooltip at the bottom-left of the targetTooltipRadius.Small: 8dp radiusTooltipRadius.Medium: 12dp radiusTooltipRadius.Full: Pills shaped (fully rounded)Contributions are welcome! Feel free to submit pull requests or create issues for any bugs or feature requests.
This project is licensed under the Apache 2.0 License - see the LICENSE file for details.
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.TooltipState
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import com.zaid.kmm_tooltip.*
import kotlinx.coroutines.launch
fun TooltipExample() {
val tooltipState = remember { TooltipState() }
val scope = rememberCoroutineScope()
AppTooltip(
state = tooltipState,
content = TooltipContent(
text = StringResource("This is a tooltip"),
textStyle = MaterialTheme.typography.bodyMedium
),
position = TooltipPosition.TopLeft,
radius = TooltipRadius.Medium,
onDismiss = { /* Handle dismiss */ }
) {
// The target element that will show the tooltip
Text(
text = "Hover over me",
modifier = Modifier.clickable {
scope.launch {
tooltipState.show()
}
}
)
}
}
TooltipPosition.BottomRight: Positions the tooltip at the bottom-right of the targetTooltipPosition.Left: Positions the tooltip at the left side of the targetTooltipPosition.Right: Positions the tooltip at the right side of the targetSurfaced from shared tags and platforms — no rankings paid for.