Vaadin 14：带有图标、文本和图像的文本字段标签的工具提示

Question

有一个使用 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(...) 也不是我要找的，因为它会持久显示文本，而不仅仅是 click/touch.

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

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

Answer 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')
                     }
                 }
             }
         )
     )
}

Vaadin 14：带有图标、文本和图像的文本字段标签的工具提示

Vaadin 14: tooltip at Textfield label with icon, text and image

vaadin

vaadin14