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

Question

There's this Vaadin 14 TextField created with field = new TextField(...); field.setLabel("Phone number"); like this:
I'd like to add an interactive info icon into that label like this:
When a user clicks (or touches) at the info icon then the system should show a popup or dialogue with some additional information (formated text and images).
I tried to add some HTML and JavaScript like this: field.setLabel("Phone number <span onclick='...'>?</span>"); but the browser just shows exactly that technical String with all its tags and so on.
I already set tooltips with field.getElement().setAttribute("title", "Some information"); but without formatting this is not fancy for longer text and as far as I know not usable for images.
field.setHelperText(...) also is not what I'm looking for because it shows the text durably and not just at a click/touch.
Is there a Vaadin way to achieve that interactive info icon? Otherwise I would to try it with JavaScript and CSS (querying the label element and adding hidden children to the TextField and show them when hovering the label like in this example https://www.scriptol.com/css/tooltip.php ).
Source of the question mark: vaadin:info-circle-o (https://vaadin.com/components/vaadin-icons/html-examples)

Answer 1

The "problem" with the label on fields as of 14.6 is, that it is just an
property on the element and while it ends up as the content of
a <label> tag, you can not provide anything but text.
One alternative would be using a FormLayout where you may provide
a component as label and therefor you can provide "whatever you want".
E.g. use an icon and add a title attribute to get some simple tool-tip
from the browser:
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')
}
}
}
)
)
}