如何在Google Chat的Card V2按钮模板中为按钮添加工具提示

核心思路 #

利用Google Chat Card V2的Button组件，通过text显示数值，同时借助tooltip属性实现悬停时展示完整描述，按需配置点击交互逻辑。

示例代码（JSON格式） #

{
  "cardsV2": [
    {
      "cardId": "numeric-list-card",
      "card": {
        "sections": [
          {
            "widgets": [
              {
                "buttonList": {
                  "buttons": [
                    {
                      "text": "数值1",
                      "tooltip": "这是数值1的完整描述：对应XX核心指标，取值范围0-100",
                      "onClick": {
                        "action": {
                          "actionMethodName": "handleValueClick",
                          "parameters": [
                            {
                              "key": "value",
                              "value": "1"
                            }
                          ]
                        }
                      }
                    },
                    {
                      "text": "数值2",
                      "tooltip": "这是数值2的完整描述：对应YY业务指标，取值范围0-50",
                      "onClick": {
                        "action": {
                          "actionMethodName": "handleValueClick",
                          "parameters": [
                            {
                              "key": "value",
                              "value": "2"
                            }
                          ]
                        }
                      }
                    },
                    {
                      "text": "数值3",
                      "tooltip": "这是数值3的完整描述：对应ZZ运营指标，取值范围10-100",
                      "onClick": {
                        "action": {
                          "actionMethodName": "handleValueClick",
                          "parameters": [
                            {
                              "key": "value",
                              "value": "3"
                            }
                          ]
                        }
                      }
                    }
                  ]
                }
              }
            ]
          }
        ]
      }
    }
  ]
}

关键细节说明 #

• tooltip属性：这是实现悬停显示完整描述的核心，直接将需要展示的描述文本赋值给该字段即可。
• buttonList组件：用于批量渲染多个按钮，完美适配数值列表的展示场景。
• onClick配置：可根据业务需求设置点击后的交互逻辑（如触发后端接口、跳转页面等），若无需点击交互可直接省略该字段。

注意事项 #

• 确保你的Google Chat应用已启用Card V2支持，旧版Card格式不兼容tooltip和buttonList的相关特性。
• tooltip文本建议控制在100字符以内，过长文本会影响悬停展示的可读性。

内容的提问来源于stack exchange，提问作者Akash Ban