是否可以在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\">

您可以以任何方式自定义它。例如，我添加了border：

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