是否可以在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定製全提示。