Determine implementation for definition tooltip

[joshblack]

Usage docs

This component replaces TooltipDefinition. It is used in the flow of text in order to provide more details about a term. The challenge with this component is that there isn't a clear interactive element to be used for the trigger. Currently, we use a button where the label of the button is the term and the description of the button is the contents of the tooltip. However, this means that activating the button does nothing and could be confusing to the end-user.

This issue is to determine how we want to implement this component in v11. It should document the HTML structure, interactions, and anything else that will be used next sprint to build out this component in React.

Behavior

• Appear on hover, disappear on mouseout
• Focus, press enter or space, appears and is persistent
• Focused, visible, press enter or space, disappears
• Focused, visible, press esc to dismiss?

Questions

• Does the definition tooltip contain interactive descendants? Yes, it could
• Is this something that role="term" and role="definition" could help us out with?

[joshblack]

Notes from Oct 21st

Action	Expected Result	Output examples
Press Tab	Focus moves to abbreviated term or truncated text
Press enter or spacebar	Reveal the tooltip/popover
Press Escape	Hide the tooltip/popover
Hover over	Reveal
Hover away	Hide

This interaction better could also work for truncation

[SThiara]

#9928

I opened up an issue just recently regarding TooltipDefinition. I figured I'd reference it here in case it's relevant to this new implementation.