如何单独修改core:ListItem组件中图标的Tooltip？

我完全懂你遇到的这个困扰：用core:ListItem的tooltip属性时，提示会套在整个列表项上，而你只想让图标单独触发tooltip。这是因为ListItem自带的icon属性是把图标作为整个列表项容器的一部分，容器的tooltip自然会覆盖整个区域。

要解决这个问题，我们可以放弃使用ListItem自带的icon属性，转而把图标做成独立的sap.ui.core.Icon控件，单独给这个图标设置tooltip，再把它和文本内容一起放到ListItem的content聚合里。这样就能精准控制只有图标触发提示，列表项的其他区域不会受影响。

具体代码示例 #

原来的代码（tooltip作用于整个列表项）：

<core:ListItem icon="sap-icon://message-error" tooltip="someTooltip" />

修改后的代码（仅图标显示tooltip）：

<core:ListItem>
    <content>
        <!-- 用FlexBox保持和原ListItem一致的图标+文本布局 -->
        <sap.m.FlexBox alignItems="Center">
            <items>
                <!-- 独立的Icon控件，单独设置tooltip -->
                <sap.ui.core.Icon 
                    src="sap-icon://message-error" 
                    tooltip="仅图标显示的提示内容"
                    styleClass="sapMListIcon" <!-- 复用UI5默认列表图标样式，保证视觉统一 -->
                />
                <!-- 列表项文本 -->
                <sap.m.Text text="你的列表项内容" marginLeft="0.5rem" />
            </items>
        </sap.m.FlexBox>
    </content>
</core:ListItem>

关键细节说明 #

• 独立Icon控件：把图标从ListItem的自带属性抽出来，变成独立控件后，它的tooltip只会作用于自身区域。
• 样式统一：给Icon加上sapMListIcon样式类，让它和原来ListItem自带的图标样式、大小完全一致，避免视觉差异。
• FlexBox布局：用FlexBox来排列图标和文本，保证和原ListItem的横向对齐、间距一致，不用自己额外写太多样式。

如果你的项目用的是sap.m.StandardListItem（更常用的列表项组件），还可以用leadingControl属性直接替换默认的前置图标，实现同样效果：

<sap.m.StandardListItem title="你的列表项标题">
    <leadingControl>
        <sap.ui.core.Icon 
            src="sap-icon://message-error" 
            tooltip="仅图标显示的提示内容"
        />
    </leadingControl>
</sap.m.StandardListItem>

这样调整后，鼠标悬停在图标上才会显示tooltip，列表项的其他区域就不会触发提示啦。

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