Flow: Unified Tooltip handling needed in component Java API's

[TatuLund]

At the moment tooltips are implemented as per component.

In Vaadin 8 the tooltip API was coherent in whole framework. It would be desirable to have the same in Vaadin 10 as well.

• Have setTooltip(..) (or something similar) API for each component

• Have setTooltipGenerator(..) (or something similar) for components with item list like ComboBox, Grid, ...

[pleku]

The element title is something that is not recommended for usage due to accessibility concerns and crappy UX in mobile devices (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title).

I don't see any other concept that would provide of _framework_ level tooltips for everything. I think that it should be made as a web component that can maybe then be applied to any element. We could then have an integration for that in Flow, but I don't see us implementing (ever) a Flow specific tooltip feature that could be applied to all components out of the box.

This type of feature does however provide value for lots of apps, so it should be something that we provide regardless of using Flow or just the web components (I think).

@jouni what are your thoughts on this ? I don't think all of our web components even have a tooltip as component feature.

[jouni]

None of our web components have a tooltip feature.

I suppose what Flow users want are a convenience/helper APIs that work on the component API level.

On a low level, a web component is indeed the technical solution. There’s already <paper-tooltip> for that purpose, and I built a prototype on top of <vaadin-overlay> (so that it can be used inside <vaadin-grid> for example) in my element collection: https://github.com/jouni/j-elements/blob/master/demo/index.html#L164-L177

[TatuLund]

See: https://vaadin.com/forum/thread/17167582/tooltips-webcomponents-for-button

[TatuLund]

See: https://stackoverflow.com/questions/51343913/display-tooltip-help-bubble-on-widgets-like-textfield-in-vaadin/51343914#51343914

[HaydenDekker]

Thanks for you help Tatu,

I'm sold on using an existing webcomponent as a tooltip, maybe point the user to the webcomponent section and provide and example on using in a button or grid. Here under the heading "Tooltips are component specific" https://vaadin.com/docs/v10/flow/migration/5-components.html

I'm not sure textfield would require it as there is already the title and placeholder to describe its entry. If the app required a more complex user input a text or paragraph would be more suitable to display information about the intended input. You don't want to have to keep hovering over the textfield while working out what it is you need to enter.

Just brainstorming, using a tooltip in grid would be needed where a button or specific item was needed, which again is easy enough to do using the webcomponent as you've given us the ability to use a renderer. But a popout help tab could also do the trick, explaining the columns in more detail.

Loving V10.

[TatuLund]

See: https://vaadin.com/forum/thread/17170676/vaadin-10-how-to-set-tooltip-in-grid-cell

[TatuLund]

See: https://stackoverflow.com/questions/52344881/how-to-display-a-grid-cell-tooltip-in-vaadin-flow

[rsivan]

As a short term solution, I copied this code from HtmlComponent into my Button extension class:
private static final PropertyDescriptor<String, Optional<String>> titleDescriptor = PropertyDescriptors .optionalAttributeWithDefault("title", "");

public void setTitle(String title) { set(titleDescriptor, title); }

[rolfsmeds]

Just to give my 5c to this discussion, I would be happy with just a convenient API for setting the title attribute for now. @pleku is correct in that there are accessibility issues with it, but in lack of a better option, it would still give developers a way to apply standard html tooltips for non-critical information that the vast majority of non-touch users would benefit from.

Its implementation could later be changed to a more accessibility-friendly solution.

[mvysny]

If we won't provide an API, users will create their own, e.g. #5903

[rolfsmeds]

For better AT (e.g. screen reader) support, a setTooltip method could automatically also set the aria-label attribute, which, unless I'm mistaken, is an AT-friendly way of providing a label to an element (which is what people mainly should be using tooltips for anyway).

[garaei]

Tooltip is really needed to be there for all vaadin component in such an easy way as component.setTooltip("Tooltip);

[rolfsmeds]

As an update to this, we are planning on providing a tooltip feature for components, but I can't yet say when nor what kind of feature that will be (i.e. whether plaintext, rich text, using the native title attribute or a separate component, with or without touch support, etc), but it is planned to be added.

In the meantime, for most cases the workaround is as simple as
c.getElement().setAttribute("title", "some tooltip");
possibly together with
c.getElement().setAttribute("aria-label", "some tooltip"); for better accessibility.

Some disabled components won't show a tooltip set that way, as they have the pointer-events:none css property. Luckily this is quite easy to override by overriding this in a stylesheet, e.g. for buttons

vaadin-button[disabled] {
        pointer-events: auto;
}

(I'm not saying this is a complete solution to all your tooltip needs, but it should cover the majority of common use cases.)

[rolfsmeds]

Linking this here for ideas: https://inclusive-components.design/tooltips-toggletips/