Reputation: 279
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
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:
It has some size issue because <th>
and <td>
have padding. But simple increase table size makes it look better:
<table style=\"width:20em\">
You can customize it in any way. For example I added border:
You can also customize whole tooltip using SCSS.
Upvotes: 3