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.

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/>"
   + "Please have a look at the following list of useful tips:"
   + "<ul>"
   + "<li>Buy stuff.</li>"
   + "<li>Add fee.</li>"
   + "<li>Sell stuff.</li>"
   + "</ul>"
   + "<span style=\"color:green;\">Yes, that is the way we do it!</span>";
   SafeHtml html = SafeHtmlUtils.fromSafeConstant...