CODEWITHSUNDEEP
vaadin
icebail
icebail

Reputation: 279

Is it possible to add a tooltip containing component in Vaadin?

I need display tooltip that contains table. Table already exist as CustomComponent. One of the solutions is duplicate table in HTML and use setDescription() method. But this looks little ugly, on my opinion.

Upvotes: 3

Views: 714

Answers (1)

jsosnowski
jsosnowski

Reputation: 1590

What do you mean ugly? Look at examples at Vaadin Book - they are really nice.

I tried to put table into Button description. 

Button b = new Button("Button");
b.setIcon(FontAwesome.LEGAL);
b.addStyleName(ValoTheme.BUTTON_FRIENDLY);

b.setDescription(
        "<table>\n" +
        "  <tr>\n" +
        "    <th style=\"padding: 10px;\">Month</th>\n" +
        "    <th style=\"padding: 10px;\">Savings</th>\n" +
        "  </tr>\n" +
        "  <tr>\n" +
        "    <td style=\"padding: 10px;\">January</td>\n" +
        "    <td style=\"padding: 10px;\">$100</td>\n" +
        "  </tr>\n" +
        "  <tr>\n" +
        "    <td style=\"padding: 10px;\">July</td>\n" +
        "    <td style=\"padding: 10px;\">$342</td>\n" +
        "  </tr>\n" +
        "  <tr>\n" +
        "    <td style=\"padding: 10px;\">November</td>\n" +
        "    <td style=\"padding: 10px;\">$0</td>\n" +
        "  </tr>\n" +
        "</table>\n"
        );

I use Valo theme. And result is:

enter image description here

It has some size issue because <th> and <td> have padding. But simple increase table size makes it look better:

<table style=\"width:20em\">

enter image description here

You can customize it in any way. For example I added border:

enter image description here

You can also customize whole tooltip using SCSS.

Upvotes: 3

Related Questions