vaadin - 是否可以在 Vaadin 中添加包含组件的工具提示？

Question

我需要显示包含表格的工具提示。表已作为 CustomComponent 存在。解决方案之一是在 HTML 中复制表格并使用 setDescription() 方法。但在我看来，这看起来有点难看。

Answer 1

丑是什么意思？查看示例 Vaadin Book - 他们真的很好。

我试图将表格放入 Button描述。

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"
        );

我使用 Valo主题。结果是:

它有一些尺寸问题，因为 <th>和 <td>有填充。但是简单地增加表格大小会使它看起来更好:

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

您可以以任何方式自定义它。例如我添加了边框:

您还可以使用 SCSS 自定义整个工具提示。