Elastic UI (EUI) 为 ComboBox 和 Selectable 组件新增工具提示功能

在最新版本的 Elastic UI (EUI) 框架中，开发团队为 EuiComboBox 和 EuiSelectable 组件新增了工具提示(tooltip)支持，这一功能改进主要源于实际业务场景中对长文本描述展示的需求。

功能背景

在实际应用中，特别是权限管理模块中，角色描述往往包含大量文本信息。传统的做法是将这些描述直接显示在下拉选项旁，但这会占用大量屏幕空间，影响用户体验。新引入的工具提示功能允许开发者将这些非核心描述内容隐藏，仅在用户悬停时显示，从而优化界面布局。

API 设计要点

新功能通过两个关键属性实现：

1. tooltipContent：定义工具提示中显示的文本内容
2. tooltipProps：允许自定义工具提示的其他属性配置

API设计遵循了几个重要原则：

• 属性直接作用于选项对象(option object)而非组件顶层
• 支持混合使用，即部分选项可以有工具提示，部分可以没有
• 优先在EuiComboBox中实现，EuiSelectable作为后续扩展

技术实现细节

在实现过程中，开发团队面临并解决了几个关键技术问题：

1. 键盘交互支持：由于技术限制，真正的焦点(focus)实际上位于搜索输入框而非列表项上。团队通过特殊处理实现了键盘导航时也能触发工具提示的功能。

2. 默认延迟设置：根据用户体验研究，工具提示默认采用较短的延迟时间，避免用户等待过久。

3. 视觉提示：考虑自动添加信息图标(iInCircle)来标识带有工具提示的选项，但最终决定将此选择权交给开发者，通过append或prepend属性自行配置。

最佳实践建议

对于开发者使用这一新功能，建议：

1. 将非核心的辅助性文字内容放入工具提示中
2. 保持工具提示内容简洁明了
3. 对于关键信息仍应直接显示，不要全部放入工具提示
4. 考虑移动端适配，确保工具提示在不同设备上都有良好的交互体验

这一功能改进不仅解决了特定业务场景下的问题，也为EUI组件库提供了更灵活的选项展示方式，是框架持续优化用户体验的又一例证。