CODEWITHSUNDEEP
vaadinvaadin8vaadin-grid
Natalie
Natalie

Reputation: 471

Vaadin 8 grid: How to display an image as tooltip in a grid cell?

I have an image in a grid cell and I want to show the enlarged image as tooltip. It should be possible with "setDescriptionGenerator". I tried the following:

grid.addComponentColumn(probe -> {
            Image image = new Image("", new ThemeResource("img/" + probe.getImage()));
            image.setWidth(35, Unit.PERCENTAGE);
            image.setHeight(35, Unit.PERCENTAGE);

            return image;
        }).setCaption("Structure").setDescriptionGenerator(probe -> {
            Image image = new Image("", new ThemeResource("img/" + probe.getImage()));

            return image;
        });

But I get the error that I cannot return an image. It seems that with "setDescriptionGenerator" I can only set a String. Is it possible to write a custom description generator? Please give me an example.

Thank you for your help!

Upvotes: 2

Views: 881

Answers (2)

tremendous7
tremendous7

Reputation: 751

Starting from the previous answer, you should set a descriptionGenerator passing also the ContentMode.HTML

grid.addComponentColumn(probe -> {
    Image image = new Image("", new ThemeResource("img/" + probe.getImage()));
    image.setWidth(35, Unit.PERCENTAGE);
    image.setHeight(35, Unit.PERCENTAGE);

    return image;
}).setCaption("Structure").setDescriptionGenerator(probe -> {
    String imgSource = "img/" + probe.getImage();
    String html = "<img src=\" " + imgSource + "\" width=\"100\" height=\"100\">";
    return html;
}, ContentMode.HTML);

Upvotes: 0

Dawid Fieluba
Dawid Fieluba

Reputation: 1301

As long as you can return only String type here I will offer you this workaround:

 grid.addComponentColumn(probe -> {
        Image image = new Image("", new ThemeResource("img/" + probe.getImage()));
        image.setWidth(35, Unit.PERCENTAGE);
        image.setHeight(35, Unit.PERCENTAGE);

        return image;
    }).setCaption("Structure").setDescriptionGenerator(probe -> {
            String imgSource = "img/" + probe.getImage();
            String html = "<img src=\" " + imgSource + "\" width=\"100\" height=\"100\">";
            return html;
        });

Upvotes: 1

Related Questions