neilpfeiffer
commented
3 years ago Thank you @RusseII for your new component request and we welcome your input on suggestions.
Background: Tooltips are a common request from Terra consumers, but is a challenging component for Terra to create, for a few reasons. You've heard the theme "mobile first design", in a similar way, Terra has been moving toward focusing on building web ui that is an "accessible first" design approach.
Traditionally, tooltips have been a common method for showing additional content like revealing truncated text, displaying the alternative text or caption for an image, clarifying the meaning of an icon/button/label/etc., showing full value of something shorthanded like a date/time or the url of a hyperlink, or providing additional details like helpful instructions.
\ What is needed: Keeping a focus on accessibility and being device (and input method) agnostic, tooltips in their traditional fashion create a few problems in Terra:
- they are primarily a desktop (mouse/pointer input) technique, and have no direct access for touch input users or non-pointer inputs, including keyboard-only users.
- because of the limitations of input support, our UX requires that any content that is provide via a tooltip needs to also be available directly as faceup content. For example, if long text is truncated, a tooltip cannot be the only way the full contents are disclosed. Tooltips should be used as secondary and supplemental, only in addition after a primary disclosure flow exists to reveal the full content presented in the tooltip.
- it is difficult, if not impossible, to make them WCAG2.1 accessible using the traditional hover interaction rules that users expect for a tooltip. Changing the behavior to make them accessible moves them closer into the realm of a popup, and questions the very intent or value of a tooltip with odd new behavior patterns. Some interesting examples from: 1)Deque University, 2)Sarah Higley, and 3)Accessibility Developers Guide.
\ What you can do: However, given those constraints, Terra would love to keep investigating the creative opportunities that might exist to make a component that has features included to solve for the problems I have mentioned above. We would love to see someone take some time and see if there are some new ways with the React ecosystem to provide for an accessible-first tooltip, available to all users/devices, and still matches a user's mental model of a behavior pattern appropriate for each device/input method.
This issue can serve as the tech design proposal for a new component, it can be added in a new comment below (for reference, here is a similar tech design created for pills recently: https://github.com/cerner/terra-framework/issues/1223). We can then have a discussion and experiment with drafting the best options for what a terra-tooltip component could be.
\
And you are correct, implementing a tooltip with the terra-popup may get you in the visual ballpark of a tooltip, but it's behavior patterns are unique for popups (not meant to trigger on hover, focus trapping once it is open, no proper way to dismiss on hover out) and would not translate to adapting it directly as a tooltip.
stale[bot]
Feature Request
Description
A tooltip that appears on hover. Disappears when hovering away. The tooltip should stay visible while over the popup area. Example of behavior I would expect - https://ant.design/components/tooltip/
Additional Context / Screenshots
We tried implementing this with popup - we were getting a lot of unexpected behavior.