Vaadin 7.3如何为ComboBox的每个选项设置独立悬浮提示？

在Vaadin 7.3里要给ComboBox的每个选项加专属悬停提示，确实没法直接用组件自带的setDescription()——正如你发现的，它只对已选中的选项生效。不过咱们可以通过两种实用的方式来实现，下面给你详细拆解：

方案一：客户端扩展（正统Vaadin方式） #

这种方式更符合Vaadin的组件扩展机制，适合需要复用的场景。

1. 编写服务器端扩展类 #

创建一个继承AbstractJavaScriptExtension的类，用来传递每个选项的提示数据到客户端：

public class ComboBoxItemTooltipExtension extends AbstractJavaScriptExtension {
    public void extend(ComboBox comboBox) {
        super.extend(comboBox);
        // 收集所有选项的提示信息（这里假设你从Item的"tooltip"属性获取提示）
        Map<Object, String> tooltipMap = new HashMap<>();
        for (Object itemId : comboBox.getItemIds()) {
            Item item = comboBox.getItem(itemId);
            if (item != null && item.getItemProperty("tooltip") != null) {
                tooltipMap.put(itemId, item.getItemProperty("tooltip").getValue().toString());
            }
        }
        // 把数据传给客户端JS
        callFunction("setTooltips", tooltipMap);
    }
}

2. 编写对应的客户端JavaScript文件 #

在和扩展类同包的位置，创建ComboBoxItemTooltipExtension.js文件，处理下拉面板的事件并设置提示：

window.com_example_ComboBoxItemTooltipExtension = function() {
    var comboBoxElement = this.getElement();
    var itemTooltips = {};

    // 接收服务器端传来的提示映射
    this.setTooltips = function(tooltipMap) {
        itemTooltips = tooltipMap;
    };

    // 监听下拉面板打开事件，动态给选项加提示
    comboBoxElement.addEventListener('dropdownopen', function() {
        var dropdownItems = comboBoxElement.querySelectorAll('.v-filterselect-suggestmenu li');
        dropdownItems.forEach(function(item, index) {
            // 通过索引匹配对应的itemId
            var targetItemId = comboBoxElement.selectedItemIds[index];
            if (itemTooltips[targetItemId]) {
                item.setAttribute('title', itemTooltips[targetItemId]);
            }
        });
    });
};

3. 使用扩展 #

在你的UI代码里，先给ComboBox的每个Item添加tooltip属性，再应用扩展：

// 初始化ComboBox和容器
ComboBox myComboBox = new ComboBox("请选择");
IndexedContainer container = new IndexedContainer();
container.addContainerProperty("caption", String.class, null);
container.addContainerProperty("tooltip", String.class, null);

// 添加选项和对应提示
Object item1 = container.addItem();
container.getItem(item1).getItemProperty("caption").setValue("基础套餐");
container.getItem(item1).getItemProperty("tooltip").setValue("适合个人用户，包含基础功能");

Object item2 = container.addItem();
container.getItem(item2).getItemProperty("caption").setValue("专业套餐");
container.getItem(item2).getItemProperty("tooltip").setValue("适合企业用户，包含高级权限与技术支持");

myComboBox.setContainerDataSource(container);
myComboBox.setItemCaptionPropertyId("caption");

// 应用提示扩展
ComboBoxItemTooltipExtension tooltipExt = new ComboBoxItemTooltipExtension();
tooltipExt.extend(myComboBox);

方案二：快速JavaScript注入（适合简单场景） #

如果不需要复用，直接用JS注入更快捷，不用写扩展类：

ComboBox myComboBox = new ComboBox("请选择");
// 先准备好选项和提示的映射
Map<Object, String> itemTooltips = new HashMap<>();
// 填充映射（这里假设你已经有了itemId和对应的提示文本）
itemTooltips.put(item1, "基础套餐提示");
itemTooltips.put(item2, "专业套餐提示");

// 当组件附加到页面后执行JS
myComboBox.addAttachListener(event -> {
    // 用Gson把Map转成JSON字符串（需要引入Gson依赖）
    String tooltipJson = new com.google.gson.Gson().toJson(itemTooltips);
    JavaScript.getCurrent().execute(String.format("" +
        "var combo = document.getElementById('%s');\n" +
        "var tooltips = %s;\n" +
        "combo.addEventListener('dropdownopen', function() {\n" +
        "   var items = combo.querySelectorAll('.v-filterselect-suggestmenu li');\n" +
        "   items.forEach(function(item, idx) {\n" +
        "       var itemId = combo.selectedItemIds[idx];\n" +
        "       if(tooltips[itemId]) {\n" +
        "           item.setAttribute('title', tooltips[itemId]);\n" +
        "       }\n" +
        "   });\n" +
        "});", myComboBox.getId(), tooltipJson));
});

注意事项 #

• Vaadin 7默认主题的下拉面板CSS类是.v-filterselect-suggestmenu，选项是li元素，如果用了自定义主题，需要调整选择器。
• 因为ComboBox支持过滤，下拉选项会动态变化，所以必须在dropdownopen事件里重新设置提示，确保每次打开下拉都能正确匹配。

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