Android Compose：已废弃PlainTooltipBox的替代方案实现咨询

升级到Compose BOM 2024.02.01（对应Material3 v2.0）后，原有的PlainTooltipBox被移除，取而代之的是TooltipBox（Material风格封装组件）和BasicTooltipBox（底层基础组件，支持高度自定义）。两者都需要显式设置PopupPositionProvider参数，下面直接上实用示例：

一、使用TooltipBox（快速实现Material风格提示） #

TooltipBox是基于BasicTooltipBox封装的组件，自带Material3的圆角、阴影等默认样式，适合大多数常规场景。系统提供了TooltipDefaults.rememberPlainTooltipPositionProvider()，可以实现和旧版PlainTooltipBox完全一致的位置逻辑：

@Composable
fun MaterialStyleTooltipExample() {
    // 管理Tooltip的显示/隐藏状态
    val tooltipState = rememberTooltipState()
    // 复用原PlainTooltip的位置计算逻辑
    val positionProvider = TooltipDefaults.rememberPlainTooltipPositionProvider()

    TooltipBox(
        positionProvider = positionProvider,
        tooltipState = tooltipState,
        tooltip = {
            // 自带Material3样式的提示内容
            PlainTooltip("这是Material风格的提示文本")
        }
    ) {
        // 触发Tooltip的目标组件（示例为信息图标按钮）
        IconButton(onClick = { /* 按钮点击逻辑 */ }) {
            Icon(Icons.Info, contentDescription = "信息图标")
        }
    }
}

如果需要调整Tooltip的固定显示位置（比如强制在目标上方/下方），可以用TooltipDefaults.rememberTooltipPositionProvider()并传入参数：

// 让Tooltip显示在目标上方，偏移16dp
val positionProvider = TooltipDefaults.rememberTooltipPositionProvider(
    verticalOffset = 16.dp,
    tooltipPosition = TooltipPosition.Above
)

二、使用BasicTooltipBox（高度自定义场景） #

如果需要完全自定义Tooltip的样式（比如背景色、文字大小、动画效果），可以使用BasicTooltipBox，它允许你自由定义提示内容的UI，同时支持复用系统位置Provider或自定义位置逻辑：

1. 复用系统位置Provider的示例 #

@Composable
fun CustomStyleTooltipExample() {
    val tooltipState = rememberTooltipState()
    val positionProvider = TooltipDefaults.rememberPlainTooltipPositionProvider()

    BasicTooltipBox(
        positionProvider = positionProvider,
        tooltipState = tooltipState,
        tooltip = {
            // 完全自定义的提示内容，无默认样式
            Box(
                modifier = Modifier
                    .background(Color.DarkGray, RoundedCornerShape(8.dp))
                    .padding(horizontal = 12.dp, vertical = 6.dp)
            ) {
                Text(
                    text = "这是自定义样式的提示",
                    color = Color.White,
                    fontSize = 14.sp
                )
            }
        }
    ) {
        TextButton(onClick = { /* 按钮点击逻辑 */ }) {
            Text("Hover/长按查看提示")
        }
    }
}

2. 自定义PopupPositionProvider #

如果系统提供的位置逻辑不满足需求，可以自己实现PopupPositionProvider接口，精确控制Tooltip相对于目标组件的位置：

// 自定义位置Provider：让Tooltip显示在目标组件右侧，垂直居中对齐，水平偏移8dp
val customPositionProvider = object : PopupPositionProvider {
    override fun calculatePosition(
        anchorBounds: IntRect,
        windowSize: IntSize,
        layoutDirection: LayoutDirection,
        popupContentSize: IntSize
    ): IntOffset {
        val x = anchorBounds.right + 8.dp.roundToPx()
        val y = anchorBounds.top + (anchorBounds.height - popupContentSize.height) / 2
        return IntOffset(x, y)
    }
}

// 在BasicTooltipBox中使用自定义位置Provider
BasicTooltipBox(
    positionProvider = customPositionProvider,
    tooltipState = tooltipState,
    tooltip = { /* 自定义提示内容 */ }
) { /* 目标组件 */ }

注意事项 #

• rememberTooltipState()用于管理Tooltip的触发状态，默认支持移动端长按、桌面端悬停触发；
• 如果需要手动控制Tooltip显示/隐藏，可调用tooltipState.show()和tooltipState.hide()方法；
• TooltipBox的tooltip参数推荐搭配PlainTooltip或RichTooltip使用，它们会自动适配Material3主题样式。

内容的提问来源于stack exchange，提问作者Peter Araujo