TooltipBox在Compose里

有些组件看得到，才知道有

官方文档指引：2025/12

来点效果：

使用光标悬停在图标上
在移动设备上长按相应图标

来点海马：

kotlin 复制代码

package com.mircles.test.ui

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.PlainTooltip
import androidx.compose.material3.Text
import androidx.compose.material3.TooltipBox
import androidx.compose.material3.TooltipDefaults
import androidx.compose.material3.rememberTooltipState
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview

@OptIn(ExperimentalMaterial3Api::class)//实验性质
@Composable
fun TestTooltipBox(
    modifier: Modifier = Modifier,
    plainTooltipText: String = "好大一个卧槽！"
) {
    TooltipBox(
        modifier = modifier,
        state = rememberTooltipState(),
        tooltip = {
            PlainTooltip {
                Text("啥呀！东西！$plainTooltipText")
            }
        },
        positionProvider = TooltipDefaults.rememberPlainTooltipPositionProvider(),
        //怎么定位显示位置的
        ) {
        IconButton(onClick = {
            /*??*/
        }) {
            Icon(
                imageVector = Icons.Filled.Favorite,
                contentDescription = "这是一个按钮"
            )
        }
    }
}

@Preview(showBackground = true, showSystemUi = true)
@Composable
private fun PreviewDemo() {

    Box(
        modifier = Modifier
            .background(Color.Gray)
            .fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        TestTooltipBox(modifier = Modifier.background(Color.Red))
    }

}

还有富文本提示： RichTooltip

kotlin 复制代码

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun RichTooltipExample(
    modifier: Modifier = Modifier,
    richTooltipSubheadText: String = "Rich Tooltip",
    richTooltipText: String = "Rich tooltips support multiple lines of informational text."
) {
    TooltipBox(
        modifier = modifier,
        positionProvider = TooltipDefaults.rememberRichTooltipPositionProvider(),
        tooltip = {
            RichTooltip(
                title = { Text(richTooltipSubheadText) }
            ) {
                Text(richTooltipText)
            }
        },
        state = rememberTooltipState()
    ) {
        IconButton(onClick = { /* Icon button's click event */ }) {
            Icon(
                imageVector = Icons.Filled.Info,
                contentDescription = "Show more information"
            )
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AdvancedRichTooltipExample(
    modifier: Modifier = Modifier,
    richTooltipSubheadText: String = "Custom Rich Tooltip",
    richTooltipText: String = "Rich tooltips support multiple lines of informational text.",
    richTooltipActionText: String = "Dismiss"
) {
    val tooltipState = rememberTooltipState()
    val coroutineScope = rememberCoroutineScope()//为什么会自动dismiss

    TooltipBox(
        modifier = modifier,
        positionProvider = TooltipDefaults.rememberRichTooltipPositionProvider(),
        tooltip = {
            RichTooltip(
                title = { Text(richTooltipSubheadText) },
                action = {
                    Row {
                        TextButton(onClick = {
                            coroutineScope.launch {
                                tooltipState.dismiss()//
                            }
                        }) {
                            Text(richTooltipActionText)
                        }
                    }
                },
            ) {
                Text(richTooltipText)
            }
        },
        state = tooltipState
    ) {
        IconButton(onClick = {
            coroutineScope.launch {
                tooltipState.show()
            }
        }) {
            Icon(
                imageVector = Icons.Filled.AccountBox,
                contentDescription = "Open camera"
            )
        }
    }
}

@Preview(showBackground = true, showSystemUi = true)
@Composable
private fun PreviewDemo() {

    Box(
        modifier = Modifier
            .background(Color.Gray)
            .fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {

        Column {

            TestTooltipBox(modifier = Modifier.background(Color.Red))

            Spacer(modifier = Modifier.height(50.dp))

            RichTooltipExample()

            Spacer(modifier = Modifier.height(50.dp))

            AdvancedRichTooltipExample()

        }
    }

}

还有些疑问点需要看源码的.....