Vaadin14组合框选择鼠标悬停时的工具提示 [英] Vaadin14 Tooltip on Combobox Selection Mouseover

问题描述

我正在使用Vaadin 14 + Java.

I'm using Vaadin 14 + Java.

我有一个带有枚举的组合框，请尽可能选择项目.

I have a combobox with an enum as possible select items.

我想尽可能多地显示组合框中的枚举，但是我想在鼠标悬停/工具提示上显示较长的属性名称".

I want to display the enum in the combobox as possible selects, but I want to show the longer attribute "name" on mouseover / tooltip.

我看到旧版本的Vaadin也存在相同的问题(显然没有解决方案)，我想知道现在是否可以选择这样做.

I saw that there has been the same question for older versions of Vaadin (and there was no solution apparently) and was wondering if there is an option to do that by now.

组合框

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

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

我的枚举类:

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;
    }

}

推荐答案

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

On the HTML level, creating a tooltip is done by defining a title property on the element.

但是该title属性必须放置在选项上，而不是comboBox本身，并且ComboBox没有像comboBox.setItemTooltipProvider(..)这样的Java API.

But that title property must be placed on the options and not the comboBox itself, and the ComboBox doesn't have a java API for doing that like comboBox.setItemTooltipProvider(..).

但是，有一个用于定义渲染器的Java API，然后将其应用于每个项目.除了使用仅将选项名称作为String返回的Renderer，我们还可以使用ComponentRenderer应用于每个项目.在此处创建一个Span组件，其中包含显示的项目名称(例如"HIGH")，然后在该Span元素上定义title属性.

However, there is a java API for defining a Renderer, which will then be applied to each item. Instead of using a Renderer that simply returns the name of the option as String, we can also use a ComponentRenderer to be applied to each item. There you create a Span component containing the displayed item name (e.g. "HIGH"), and on that Span element you define the title property.

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;
}));

这篇关于Vaadin14组合框选择鼠标悬停时的工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！