android compose TooltipBox 工具提示使用

您可以使用 TooltipBox 可组合项在应用中实现工具提示。您可以使用以下主要参数控制 TooltipBox 的外观：

positionProvider：相对于锚点内容放置工具提示。您通常使用 TooltipDefaults 中的默认位置提供程序，或者，如果您需要自定义定位逻辑，也可以提供自己的位置提供程序。
tooltip：包含工具提示内容的可组合项。您通常使用 PlainTooltip 或 RichTooltip 可组合项。
- 使用 PlainTooltip 描述图标按钮的元素或操作。
- 使用 RichTooltip 提供更多详细信息，例如描述特征的值。富工具提示可以包含可选的标题、链接和按钮。
state：包含此工具提示的界面逻辑和元素状态的状态容器。
content：工具提示所锚定的可组合内容。

代码要点

TooltipBox 生成一个包含文本"添加到收藏夹"的工具提示。
- TooltipDefaults.rememberPlainTooltipPositionProvider() 为普通工具提示提供默认定位。
- tooltip 是一个 lambda 函数，用于使用 PlainTooltip 可组合项定义工具提示的内容。
- Text(plainTooltipText) 在工具提示中显示文本。
- tooltipState 控制工具提示的状态。
IconButton 创建一个带有图标的可点击按钮。
- Icon(...) 在按钮内显示一个心形图标。
- 当用户与 IconButton 互动时，TooltipBox 会显示包含文本"添加到收藏夹"的工具提示。根据设备的不同，用户可以通过以下方式触发工具提示：
- 将光标悬停在图标上
- 在移动设备上长按图标

复制代码

package com.wn.androidcomposedemo1.basegoogle

import android.os.Bundle
import android.util.Log
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Call
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Info
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.PlainTooltip
import androidx.compose.material3.RichTooltip
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.material3.TooltipBox
import androidx.compose.material3.TooltipDefaults
import androidx.compose.material3.rememberTooltipState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.wn.androidcomposedemo1.ui.theme.AndroidComposeDemo1Theme
import kotlinx.coroutines.launch

/**
 * Author : wn
 * Email : maoning20080808@163.com
 * Date : 2026/6/28 23:33
 * Description : 工具提示
 */
class TooltipBoxActivity : ComponentActivity(){

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            AndroidComposeDemo1Theme() {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    TooltipDemo()
                }
            }
        }
    }

    @Preview
    @Composable
    fun TooltipDemo(){
        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
            modifier = Modifier.fillMaxSize()
        ) {
            Spacer(Modifier.height(20.dp))
            Text("富文本工具提示", fontSize = 30.sp, color = Color.Red)
            Spacer(Modifier.height(20.dp))
            PlainTooltipExample()
            Spacer(Modifier.height(20.dp))
            RichTooltipExample()
            Spacer(Modifier.height(20.dp))
            AdvancedRichTooltipExample()
        }
    }

    @OptIn(ExperimentalMaterial3Api::class)
    @Preview
    @Composable
    fun PlainTooltipExample(){
        val plainTooltipText = "添加喜欢"
        //长按提示，
        TooltipBox(
            modifier = Modifier.wrapContentWidth(),
            positionProvider = TooltipDefaults.rememberPlainTooltipPositionProvider(),
            tooltip = {
                PlainTooltip() {
                    Text(plainTooltipText)
                }
            },
            state = rememberTooltipState()
        ) {
            IconButton(
                onClick = {
                    Log.d("AAA", "点击图标")
                }
            ) {
                Icon(
                    imageVector = Icons.Filled.Favorite,
                    contentDescription = "添加喜欢图标2"
                )
            }
        }
    }

    @OptIn(ExperimentalMaterial3Api::class)
    @Preview
    @Composable
    fun RichTooltipExample(){
        val richTooltipTitle = "富文本标题"
        val richTooltipText = "富文本内容"

        //长按提示
        TooltipBox(
            modifier = Modifier.wrapContentWidth(),
            positionProvider = TooltipDefaults.rememberRichTooltipPositionProvider(),
            tooltip = {
                RichTooltip(
                    title = {Text(richTooltipTitle)}
                ) {
                    Text(richTooltipText)
                }
            },
            state = rememberTooltipState()
        ) {
            IconButton(onClick = {

            }) {
                Icon(
                    imageVector = Icons.Filled.Info,
                    contentDescription = "显示更多信息"
                )
            }
        }
    }

    /**
     * 自定义富文本工具提示
     */
    @OptIn(ExperimentalMaterial3Api::class)
    @Preview
    @Composable
    fun AdvancedRichTooltipExample(){
        val richTooltipTitle = "自定义富文本标题"
        val richToolTipText = "自定义富文本内容自定义富文本内容自定义富文本内容自定义富文本内容自定义富文本内容自定义富文本内容自定义富文本内容自定义富文本内容自定义富文本内容"
        val richTooltipActionText = "取消"
        val tooltipState = rememberTooltipState()
        val coroutineScope = rememberCoroutineScope ()

        TooltipBox(
            modifier = Modifier.wrapContentWidth(),
            positionProvider = TooltipDefaults.rememberRichTooltipPositionProvider(),
            tooltip = {
                RichTooltip(
                    title = {Text(richTooltipTitle)},
                    action = {
                        Row() {
                            TextButton(onClick = {
                                coroutineScope.launch {
                                    tooltipState.dismiss()
                                }
                            }) {
                                Text(richTooltipActionText)
                            }
                        }
                    }
                ) {
                    Text(richToolTipText)
                }
            },
            state = tooltipState
        ) {
            IconButton(onClick = {
                coroutineScope.launch {
                    tooltipState.show()
                }
            }) {
                Icon(
                    imageVector = Icons.Filled.Call,
                    contentDescription = "拨打电话"
                )
            }
        }
    }
}

android compose TooltipBox 工具提示 使用

代码要点

android compose TooltipBox 工具提示使用