Tooltips

Flow
1

How do we set tooltips for textfields, buttons etc in Flow?

2

As described in the documentation:

In Vaadin 10 there is no automatic way for this; it is a component specific feature and possible using CSS.

You could use CSS to accomplish that, something like [that]
(https://www.w3schools.com/css/css_tooltip.asp).

3

This is a bit disappointing.

CSS tooltip will work but no efficient for all case of use.
A javascript tooltip was able to switch to bottom or top if there no enough place to display it.

But i agree the css method could be easily added to all components to work.

I just write this class and the css file and so i can use it anywhere.

public class Tooltip {	
	public static void addTo(Element elem, String tooltip){
		Element span = ElementFactory.createSpan();
		span.getClassList().add("tooltiptext");
		span.setText(tooltip);
		
		elem.getClassList().add("tooltip");
		elem.appendChild(span);
	}

But if i try to use javascript library for displaying a tooltip, for example jquery, that won’t work.
The event DOM seems not to be fired to jquery because the component is not the light dom.

And overwrite the polymer component to add this feature is not a good option …

4

Do you need rich text tooltips? If not, you can use the native tooltip: component.getElement().setAttribute("tooltip", "My tooltip");

I have a prototype tooltip element which you can also try if you want to: https://github.com/jouni/j-elements/releases/tag/v0.1.0

5

Jouni Koivuviita:
component.getElement().setAttribute("tooltip", "My tooltip");

Does not work for me (flow beta7, chrome 66, firefox 56)

Edit: this works:
c.getElement().setAttribute(“title”, “tooltip”);

6

Jouni Koivuviita:
Do you need rich text tooltips? If not, you can use the native tooltip: component.getElement().setAttribute("tooltip", "My tooltip");

I have a prototype tooltip element which you can also try if you want to: https://githubee your protoype.com/jouni/j-elements/releases/tag/v0.1.0

you mean title attribute for native navigator tooltip.
But yes i will need html content in the tooltip too.

I see your prototype. How can i use it to be integrated for a web component ?
Should i wrap the component into a <j-tooltip> tag ?

7

Edit: this works: c.getElement().setAttribute("title", "tooltip");

Sorry, my mistake – I also meant the title attribute. I updated my previous message.

I see your prototype. How can i use it to be integrated for a web component ? Should i wrap the component into a tag ?

You place the <j-tooltip> element inside another component, for which you want to have a tooltip. Here are two examples – one for plain text and another for HTML content: https://github.com/jouni/j-elements/blob/v0.1.0/demo/index.html#L164-L177

8

I’m working on a new version of the j-elements, which are vanilla JS (no Polymer dependency) and packaged as ES modules, and then release then in npm instead of bower.

The new tooltip element will also not require a template for HTML content – you just put any HTML directly inside it (without wrapping it with a <template>).

9

I tried it.
Works fine on pure client side with or without html.

For server side i to this for adding a tooltip for every webcomponent:

public static void addTo(Element elem, String tooltip){
		Element jtooltip = new Element("j-tooltip");
		jtooltip.setAttribute("text", tooltip);		
		elem.appendChild(jtooltip);
}

this works fine.

But didn’t manage to make it work with html content.
The tooltip appears empty.

public static void addTo(Element elem, String tooltip){
		Element jtooltip = new Element("j-tooltip");
		Element template = new Element("template");		
		template.setText(tooltip);
		jtooltip.appendChild(template);		
		elem.appendChild(jtooltip);
	}
}
10

Try setting the innerHTML property of the template instead of text. I tried the same code in JavaScript, and it worked okay, but not with template.innerText.

11

yes it work with that

template.setProperty("innerHTML", tooltip);

thank you!

12

Hi there,

I know it’s an old post but maybe I will find a solution.

I want to display tooltip in my application but can’t figure how to do it.

I tried the above code from @Alain HIRSCH but the innerHTML doesn’t appear.

Here is my code and the result as attachment :

        final Button btn = new Button("Test");
        Element jtooltip = new Element("j-tooltip");
        Element template = new Element("template");     
        template.setProperty("innerHTML", "I'm a tooltip!");
        jtooltip.appendChild(template);     
        btn.getElement().appendChild(jtooltip);
        add(btn);

Any help?
Thanks!
17381723.png

13

Hi,

I’ve the same error. Is there a solution to add a tooltip (paper-tooltip or j-tooltip) to a vaadin component ? (textfield for example)

Thanks,

14

Hi,

I attached a non-working example. (I tried with paper-tooltip and j-tooltip).

Thanks,
17409963.zip (7.07 KB)

15

Hi.

I had the same issue with newest vaadin 10 version . My previous posts was with a vaadin 10 beta version.

I don’t know why this doesn’t work anymore. I made a change in j-tooltip.html and it works now.

Replacing this :

const Templatizer = Polymer.Templatize.templatize(this._contentTemplate, this, {
              instanceProps: {
                detail: true,
                target: true
              },
              forwardHostProp: function(prop, value) {
                if (this._instance) {
                  this._instance.forwardHostProp(prop, value);
                }
              }
            });
            this._instance = new Templatizer({});
            this._overlay.content = this._instance.root;

By :

this._overlay.shadowRoot.querySelector('#overlay').querySelector("#content").innerHTML = this._contentTemplate.innerHTML;

I share you a single test project. There is a tooltip on the TextField on the top of the page. You can see the MainLayout class to see the code.

17412691.zip (96.9 KB)

16

Hi,

I didn’t check j-tooltip component, I thought the problem was related to java integration.

Thanks a lot for your solution!

17

Hi,

Thanks a lot Alain for your response.
It works perfectly.

I have implemented PaperTooltip too but I encountered problems within vaadin-grid.
The tooltip can’t be shown over the cell boundaries.
I’ve tried making the tooltip in the same parent as the targeted element.

Thanks again.

18

This is related to the shadow dom, somehow it is not possible to “break out” of that with web component based tooltips. For me it helped to integrate a pure JS library (tippy.js: https://atomiks.github.io/tippyjs/).