eventscomboboxmousehovervaadin23

How to display a property of selection object while hovering cursor over combo box item in Vaadin

In my Vaadin (v.23.2.6) application I am creating a bean of class Book. This bean has set of tags. Tags are retrieved from the database and contain two properties - tagName and tagDescription. In my UI form I specified MultiSelectComboBox for Tags.

this.tagsField = new MultiSelectComboBox<>("Tags");
this.tagsField.setAllowCustomValue(true);
this.tagsField.setAutoOpen(false);
this.tagsField.setItemLabelGenerator(Tag::getTagName);

It is working, but I do want to display value of tagDescription when cursor is hovering over the tagName in the selection list. What kind of event listener I can use for that purpose? Shall I use Notification or there is something else that can help me with this implementation? Please advise.

Solution

  • While it's technically possible, you don't want to listen to hover (mouseover) events on the server. That's overkill and will lead to a lot of unnecessary network traffic. Instead, you can take care of it in the client with a Renderer. For example, using the standard HTML title attribute:

    tagsField.setRenderer(LitRenderer.<Tag>of(
    "<span title='${item.description}'>${item.name}</span>")
        .withProperty("description", Tag::getTagDescription)
        .withProperty("name", Tag::getTagName)
);