Tooltip

Tooltip

A popup component that displays informative text when users long-press an element.


Installation

./gradlew lumo --add Tooltip

Usage

Basic Tooltip

val tooltipState = rememberTooltipState()
 
TooltipBox(
    tooltip = {
        Tooltip {
            Text("This is a tooltip")
        }
    },
    state = tooltipState
) {
    Button(onClick = {}) {
        Text("Hover me")
    }
}

Persistent Tooltip

val tooltipState = rememberTooltipState(isPersistent = true)
 
TooltipBox(
    tooltip = {
        Tooltip(
            containerColor = AppTheme.colors.surface,
            shadowElevation = 4.dp,
            shape = RoundedCornerShape(8.dp)
        ) {
            Text("Persistent tooltip")
        }
    },
    state = tooltipState
) {
    IconButton(onClick = {}) {
        Icon(Icons.Default.Info, "Info")
    }
}

API Documentation

TooltipBox Parameters

ParameterTypeDescription
modifierModifierModifier for the tooltip box
tooltip@Composable TooltipScope.() -> UnitTooltip content
stateTooltipStateState of the tooltip
focusableBooleanWhether tooltip can be focused
enableUserInputBooleanEnable user interactions
positionProviderPopupPositionProviderCustom position provider
content@Composable () -> UnitContent that triggers tooltip

Tooltip Parameters

ParameterTypeDescription
modifierModifierModifier for the tooltip
caretSizeDpSizeSize of the tooltip caret
maxWidthDpMaximum width of tooltip
shapeShapeShape of the tooltip
containerColorColorBackground color
shadowElevationDpElevation shadow size
content@Composable () -> UnitContent inside tooltip

TooltipState Methods

MethodDescription
show()Shows the tooltip
dismiss()Dismisses the tooltip