platform

platform copied to clipboard

Description

Tooltip support for components and Grid cells. Accessible and touch-friendly where feasible.

Use cases

As a developer I want to provide

• additional information for input fields
• descriptions for labelless input fields
• descriptions for icon-only buttons
• additional information on Grid cells
• Help buttons that show tooltips

Acceptance criteria

• [ ] Text-only content (no interactive or focusable content)
• [ ] Shown on hover and keyboard focus (when the element is focused by keyboard)
• [ ] Can be shown programmatically
• [ ] A11y: Assistive Technology support through aria-describedby
• [ ] Shown (on mouseover/focus) and hidden (on mouseout/blur) after a default delay
• [ ] Configurable show and hide delays (global and instance specific)
• [ ] Configurable positioning (per instance)
• [ ] Convenience API for components with official support
• [ ] Secondary API for other components (e.g. html elements)
• [ ] Tooltip generator API for Grid cells

General criteria

• [x] APIs reviewed
• [ ] Performance: Check Grid performance with tooltips on cells
• [ ] UX/DX tests in Alpha
• [ ] Documentation:
• [ ] How to test?
• [ ] Limitations: 1. Not supported on disabled components (for technical reasons); 2. Accessibility only guaranteed for certain components.

Links

• Discussion and API design: https://github.com/vaadin/platform/discussions/3196

I really like this idea, as it is missing since v8. But I think it would be a huge downside for a lot of people if you are only allowed to add plain text inside the tooltips. I can totally understand the reasoning behind this with A11Y and people are going to miss-use this addition.. That's why I would suggest to add another method like HasTooltip::setTooltip(StyledText text) where StyledText is a class that contains for example basic allowed HTML tags (strong, i, vaadin-icon, paragraph and so on) and would render slightly more "stylish" and you could still extract the meaningful words with jsoup to get proper a11y descriptions if needed)

It would be nice to have a way to provide formatted text content, while still avoiding a11y/rendering/etc hassles of allowing any arbitrary html content.

A StyledText class might be a good approach (thanks for the idea!) and could be used for other text-only elements as well, like field labels etc. But that would be outside the scope of this feature of course – support for it could be added later once it exists.

Another possibility we've been toying with is allowing arbitrary Html content but extracting the text from those for aria-describedby e.g. with Node.textContent.

I've also been toying with the idea of supporting markdown. That might be a more convenient/concise/less error-prone way to provide simple formatting rather than building an HTML fragment.

In any case, support for any of these approaches can be added later.

Related to: https://github.com/vaadin/flow/issues/4169

Vaadin 23.3.0 is out, closing this issue as delivered.