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/

[rolfsmeds]

Internally collecting use cases for tooltips here: https://docs.google.com/spreadsheets/d/1cIlcSKcNs_slk1nRl7yMdKJYi147RKyf8njcHbly3LA/edit?usp=sharing

(others can add their use cases, if not already mentioned here, as issue comments)

[enver-haase]

How about the most simple

getElement().setAttribute("title", "Tooltip");

like here:
#13411

Okay, I understand
#4169 (comment)

...but it is what some people would like to use, due to its ease of use and simplicity.

[rolfsmeds]

Not entirely sure what you mean there @enver-haase. Setting the title attrib through the element API is already mentioned as the only way to add tooltips today: #4169 (comment).

This issue is about providing a nicer API for doing that, that also works well in terms of accessibility, ideally also for touch devices, and maybe with rich content support (i.e. formatting).

[enver-haase]

Fight for Simplicity --- in this case, I believe we should just add it, and if we need four years to discuss an ARIA-friendly version, comment the non-conformity in the new Component.setTitle(String) and then add some ARIA compatible version years later when it is properly designed, on top or as a compatible replacement.

[enver-haase]

See my revised PR above. Can we agree on that?

[knoobie]

I would suggest to re-open this ticket. Yes, the PR adds a small improvement but doesn't fix the original ticket about "real" tool-tip support.

[mshabarov]

Agree, let's keep it opened for further improvements.

[mshabarov]

Change made in #13411 reverted as it introduced API clashed with existing components. This feature still needs a design. Comments in #13411 give a suggestions how it can be designed.

[TatuLund]

I am closing this as the feature was implemented in Vaadin 23.3.0.