Tooltip & Popup in Jetpack Compose -Floating UI Guide

#android #kotlin #jetpackcompose #material3

Master Compose's floating UI elements!

PlainTooltip

Simple tooltip with basic styling:

TooltipBox(
    tooltip = { PlainTooltip { Text("This is a tooltip") } },
    state = rememberTooltipState(),
    modifier = Modifier.padding(16.dp)
) {
    Button(onClick = {}) {
        Text("Hover me")
    }
}

RichTooltip with Title and Action

Enhanced tooltip with title and action button:

TooltipBox(
    tooltip = {
        RichTooltip(
            title = { Text("Feature Title") },
            action = { Button(onClick = {}) { Text("Learn More") } }
        ) {
            Text("This is a rich tooltip with detailed explanation.")
        }
    },
    state = rememberTooltipState(),
    modifier = Modifier.padding(16.dp)
) {
    Icon(Icons.Filled.Info, "Info")
}

DropdownMenu with DropdownMenuItem

Context menus and option lists:

var expanded by remember { mutableStateOf(false) }

Box {
    Button(onClick = { expanded = true }) {
        Text("Menu")
    }
    DropdownMenu(expanded = expanded, onDismissRequest = { expanded = false }) {
        DropdownMenuItem(
            text = { Text("Option 1") },
            onClick = { expanded = false }
        )
        DropdownMenuItem(
            text = { Text("Option 2") },
            onClick = { expanded = false }
        )
    }
}

Popup with Alignment and Offset

Position floating content precisely:

Popup(
    alignment = Alignment.TopEnd,
    offset = IntOffset(x = -10, y = 10),
    onDismissRequest = { showPopup = false }
) {
    Box(
        modifier = Modifier
            .background(Color.White)
            .border(1.dp, Color.Gray)
            .padding(8.dp)
    ) {
        Text("Popup content")
    }
}

TooltipBox Complete Example

Full tooltip integration:

TooltipBox(
    tooltip = { PlainTooltip { Text("Delete this item") } },
    state = rememberTooltipState(),
    modifier = Modifier.padding(4.dp)
) {
    IconButton(onClick = { /* Delete */ }) {
        Icon(Icons.Filled.Delete, "Delete")
    }
}