CODEWITHSUNDEEP
vaadinvaadin14
user14972917
user14972917

Reputation:

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

There's this Vaadin 14 TextField created with field = new TextField(...); field.setLabel("Phone number"); like this:

Vaadin TextField with a label

I'd like to add an interactive info icon into that label like this:

Vaadin TextField with a label and info icon

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)

Upvotes: 1

Views: 1390

Answers (1)

cfrick
cfrick

Reputation: 37033

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

Upvotes: 1

Related Questions