O'Reilly logo

Vaadin 7 Cookbook by Ondrej Kvasnovsky, Jaroslav Holan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Showing a rich tooltip with an image

We are going to implement a rich tooltip that will appear when we point to the basic Label component with the cursor, in the browser. The tooltip will show information in a different font size and color. There will also be an image on it.

Showing a rich tooltip with an image

How to do it...

Carry out the following steps:

  1. Create a new Label instance and place it on the UI.
    Label label = new Label("Hello Vaadin user");
    addComponent(label);
  2. Then construct the tooltip HTML string and set it as a description on the label.
    String tooltip = "<span style=\"font-size:30px;\">Welcome!</span>" + "<img src=\"VAADIN/themes/runo/icons/32/globe.png\"/>" + "<br/>" + ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required