如何控制Salesforce Screen Flow帮助文本显示方式？实现hover触发展示

一、检查Flow自身的帮助文本配置 #

• 打开目标Screen Flow，进入对应Screen的编辑界面
• 定位到头部帮助文本的设置区域，确认触发方式：
  • 部分Flow配置帮助文本时，会提供「点击弹窗」「悬停显示」的选项，若当前是点击模式，直接切换为悬停模式即可
  • 若帮助图标是通过自定义组件添加的，检查组件属性，将触发逻辑从click改为hover

二、检查Org全局UI设置 #

即使版本一致，Org的全局配置可能存在差异：

• 进入Setup，搜索User Interface
• 找到Help Text Settings（帮助文本设置）
• 确认「悬停显示帮助文本」的全局选项是否开启：
  • 开启后，所有标准帮助图标会默认采用悬停显示逻辑
  • 若全局开启后仍有问题，检查对应Profile的UI设置：进入Profile编辑页，在「User Interface」板块确认帮助文本的显示规则是否被覆盖

三、自定义LWC组件替代（标准配置失效时） #

如果上述方法无法解决，可自定义轻量级LWC组件实现悬停效果：

1. 创建LWC组件，示例代码如下：

<template>
    <span class="help-icon" onmouseover={showHelp} onmouseout={hideHelp}>
        <lightning-icon icon-name="utility:info" size="x-small"></lightning-icon>
        <template if:true={showText}>
            <div class="help-text">{helpText}</div>
        </template>
    </span>
</template>

import { LightningElement, api } from 'lwc';

export default class HoverHelpIcon extends LightningElement {
    @api helpText;
    showText = false;

    showHelp() {
        this.showText = true;
    }

    hideHelp() {
        this.showText = false;
    }
}

.help-icon {
    position: relative;
    cursor: help;
}

.help-text {
    position: absolute;
    top: 20px;
    left: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 8px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 999;
    white-space: nowrap;
}

2. 将组件添加到Screen Flow的头部区域，传入需要显示的帮助文本
3. 移除原有标准帮助图标，使用自定义组件替代

四、确认Flow激活版本 #

检查两个环境中使用的是否为同一版本的激活Flow，避免因未激活修改后的配置导致显示效果不一致

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