如何在Jetpack Compose中实现提示框（Tooltip）？

Jetpack Compose（Material3）提供了官方Tooltip组件，我们可以通过自定义内容快速实现你图中那种深色背景、白色文字的提示框效果，甚至可以添加箭头样式。以下是具体实现方案：

1. 基础自定义提示框 #

使用TooltipBox包裹目标组件，在tooltip参数中自定义提示框的样式：

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Info
import androidx.compose.material3.Icon
import androidx.compose.material3.TooltipBox
import androidx.compose.material3.TooltipDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun BasicCustomTooltip() {
    val coroutineScope = rememberCoroutineScope()
    
    TooltipBox(
        positionProvider = TooltipDefaults.rememberPlainTooltipPositionProvider(),
        tooltip = {
            Box(
                modifier = Modifier
                    .background(Color.DarkGray, RoundedCornerShape(4.dp))
                    .padding(horizontal = 12.dp, vertical = 6.dp)
            ) {
                Text(text = "这是自定义提示框", color = Color.White)
            }
        },
        state = TooltipDefaults.tooltipState(coroutineScope)
    ) {
        Icon(
            imageVector = Icons.Default.Info,
            contentDescription = "信息图标",
            tint = Color.Gray
        )
    }
}

这段代码实现了基础的深色圆角提示框，默认通过长按触发显示。

2. 添加箭头样式 #

如果需要像图中那样带指向目标的箭头，可以使用官方的RichTooltip组件，或者完全自定义箭头布局：

方式一：使用官方RichTooltip #

@Composable
fun TooltipWithArrow() {
    val coroutineScope = rememberCoroutineScope()
    
    TooltipBox(
        positionProvider = TooltipDefaults.rememberRichTooltipPositionProvider(),
        tooltip = {
            TooltipDefaults.RichTooltip(
                text = { Text(text = "带箭头的提示框", color = Color.White) },
                containerColor = Color.DarkGray,
                contentColor = Color.White,
                shape = RoundedCornerShape(4.dp)
            )
        },
        state = TooltipDefaults.tooltipState(coroutineScope)
    ) {
        Icon(
            imageVector = Icons.Default.Info,
            contentDescription = "信息图标",
            tint = Color.Gray
        )
    }
}

方式二：完全自定义箭头 #

如果需要更灵活的箭头样式，可以用Compose的Canvas绘制：

@Composable
fun FullyCustomTooltipWithArrow() {
    val coroutineScope = rememberCoroutineScope()
    
    TooltipBox(
        positionProvider = TooltipDefaults.rememberPlainTooltipPositionProvider(),
        tooltip = {
            Box {
                Box(
                    modifier = Modifier
                        .background(Color.DarkGray, RoundedCornerShape(4.dp))
                        .padding(horizontal = 12.dp, vertical = 6.dp)
                ) {
                    Text(text = "自定义箭头提示框", color = Color.White)
                }
                androidx.compose.foundation.Canvas(
                    modifier = Modifier.offset(x = 16.dp, y = (-8).dp)
                ) {
                    drawPath(
                        path = androidx.compose.ui.graphics.Path().apply {
                            moveTo(0f, size.height)
                            lineTo(size.width / 2, 0f)
                            lineTo(size.width, size.height)
                            close()
                        },
                        color = Color.DarkGray
                    )
                }
            }
        },
        state = TooltipDefaults.tooltipState(coroutineScope)
    ) {
        Icon(
            imageVector = Icons.Default.Info,
            contentDescription = "信息图标",
            tint = Color.Gray
        )
    }
}

可以通过调整offset参数控制箭头位置，适配不同目标组件。

3. 设置悬浮触发（替代长按） #

默认Tooltip是长按触发，若需要鼠标悬停/触摸停留显示，可修改tooltipState的延迟配置：

val tooltipState = TooltipDefaults.tooltipState(
    coroutineScope = coroutineScope,
    showDelayMillis = 500, // 悬浮500毫秒后显示
    hideDelayMillis = 100  // 离开后100毫秒隐藏
)

将这个state传入TooltipBox即可实现悬浮触发效果。

内容的提问来源于stack exchange，提问作者Osama Sayed