Vaadin 14：带有图标、文本和图像的 Textfield 标签的工具提示答案

【问题标题】：Vaadin 14: tooltip at Textfield label with icon, text and imageVaadin 14：带有图标、文本和图像的 Textfield 标签的工具提示
【发布时间】：2021-10-17 22:58:07
【问题描述】：

使用field = new TextField(...); field.setLabel("Phone number"); 创建的这个 Vaadin 14 TextField 如下所示：

我想在该标签中添加一个交互式信息图标，如下所示：

当用户点击（或触摸）信息图标时，系统应显示一个弹出窗口或带有一些附加信息（格式化文本和图像）的对话框。

我尝试添加一些 HTML 和 JavaScript，如下所示：field.setLabel("Phone number <span onclick='...'>?</span>");，但浏览器只显示了该技术字符串及其所有标签等等。

我已经使用field.getElement().setAttribute("title", "Some information"); 设置了工具提示，但没有格式化这对于较长的文本来说并不理想，而且据我所知不适用于图像。

field.setHelperText(...) 也不是我想要的，因为它可以持久地显示文本，而不仅仅是点击/触摸。

是否有 Vaadin 方法来实现该交互式信息图标？否则我会尝试使用 JavaScript 和 CSS（查询标签元素并将隐藏的子元素添加到 TextField 并在悬停标签时显示它们，如本例 https://www.scriptol.com/css/tooltip.php ）。

问号来源：vaadin:info-circle-o (https://vaadin.com/components/vaadin-icons/html-examples)

【问题讨论】：

标签： vaadin vaadin14

【解决方案1】：

从 14.6 开始，字段标签的“问题”是，它只是一个元素上的属性，而它最终作为的内容 <label> 标签，除了文本，你不能提供任何东西。

另一种选择是使用FormLayout，您可以在其中提供一个组件作为标签，因此您可以提供“任何您想要的”。例如。使用图标并添加title 属性以获得一些简单的工具提示从浏览器：

new FormLayout().tap{
     addFormItem( // XXX
         new TextField(),
         new Span(
             new Text("The Label"),
             VaadinIcon.QUESTION_CIRCLE.create().tap{
                 setSize('12px')
                 setColor('blue')
                 element.tap{
                     setAttribute("title", "The Help")
                     style.tap{
                         set('padding-left', '4px')
                     }
                 }
             }
         )
     )
}

【讨论】：