组合框选择鼠标悬停时的 Vaadin 14 工具提示

Question

我正在使用 Vaadin 14 + Java。

我有一个组合框，其中包含尽可能多的枚举 select 项。

我想尽可能在组合框中显示枚举 select，但我想在鼠标悬停/工具提示上显示较长的属性 "name"。

我看到旧版本的 Vaadin 也有同样的问题（显然没有解决方案），想知道现在是否有解决方案。

组合框

ComboBox<MyEnum> cb = new ComboBox<>();
cb.setLabel("MyComboBox");
cb.setItems(MyEnum.values());

//cb.setDescription --> does not exist for ComboBox?

我的枚举 class:

public enum MyEnum {

    HIGH("High long name explanation"),
    MEDIOCRE("Mediocre long name explanation"),
    LOW("Low long name explanation");

    private final String name;

    private MyEnum(String name) {
        this.name = name;
    }

    public String getValue(){
      return name;
    }

}

Answer 1

在 HTML 级别，通过在元素上定义 title 属性来创建工具提示。

但是那个标题属性必须放在选项上而不是组合框本身，并且 ComboBox 没有 java API 来做那个像 comboBox.setItemTooltipProvider(..).

但是，有一个 java API 用于定义渲染器，然后将其应用于每个项目。除了使用简单地 returns 选项名称作为字符串的渲染器，我们还可以使用 ComponentRenderer 应用于每个项目。在那里您创建了一个 Span 组件，其中包含显示的项目名称（例如 "HIGH"），并在该 Span 元素上定义标题属性.

ComboBox<MyEnum> comboBox = new ComboBox<>();
comboBox.setLabel("MyComboBox");
comboBox.setItems(MyEnum.values());
comboBox.setRenderer(new ComponentRenderer<>(item -> {
    Span span = new Span(item.name());
    span.getElement().setProperty("title", item.getValue());
    return span;
}));

组合框选择鼠标悬停时的 Vaadin 14 工具提示

Vaadin14 Tooltip on Combobox Selection Mouseover

java

combobox

vaadin

vaadin14