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/
We tried implementing this with popup - we were getting a lot of unexpected behavior.
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:
\
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.
Most helpful comment
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:
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-tooltipcomponent could be.\
And you are correct, implementing a tooltip with the
terra-popupmay 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.