☂ Tooltip: open issues to resolve in converged approach

[dzearing]

Problems

The v7 Tooltip today is cumbersome to use. Some of the main painpoints:

1. It wraps the content in a DIV, creating issues with CSS styling that very likely assume a different DOM shape.
2. The DIV is inline, meaning that measuring the dimensions wraps around textual content rather than block content:

Expected:

Resulted:

The documented examples say the way to work around this is "use our styling api to set the container to inline-block." The right fix is to not use a wrapper element at all.

3. The API surface is complex and things need to be scrubbed and reviewed:

• https://developer.microsoft.com/en-us/fluentui#/controls/web/tooltip

4. Hosting tooltips within tooltips does not do the right thing (dismisses everything.)
5. When a tooltip is shown and you tab to another item which has a tooltip, the tooltip fades out/in, rather than just moving over (we should be more intentional about motion here.)
6. The tooltip is hard to see from other content. Would be nice to be inverted.
7. There is no central way to dismiss tooltips. There should be a way to raise an event, or call some universally accessible api to dismiss or possibly disable tooltips on the page. (E.g. a TooltipManager component?)

Proposals / Ideas

1. Rename it to Tooltip. Let's not have a messy "host" suffix.
2. No wrapper divs.
3. Simplify API surface. (Needs some research and review.)
4. Some imperative way to dismiss all tooltips. Tooltip.dismissAll() static could be nice.

Key issue capturing some ideas from awhile back

• Tooltip: refactor to minimize bundle impact and use consistently. Tooltip: refactor to minimize bundle impact and use consistently. #5541

Active issues the need investigation

• Issues due to use HTML title for tooltips
  • These are cases where we want to use tooltips everywhere, but don't want to tightly couple components to tooltip
  • Add Tooltip to Close Button on Panel Sample. Add Tooltip to Close Button on Panel Sample. #14999
  • Persona remove button doesn't have tooltip Persona remove button doesn't have tooltip #14902
  • Tooltips for Calendar/DatePicker controls cannot be accessed by Keyboard users Tooltips for Calendar/DatePicker controls cannot be accessed by Keyboard users #14122
  • Tooltip of dismiss button in Dialog control is not opened on tabbing through keyboard Tooltip of dismiss button in Dialog control is not opened on tabbing through keyboard #13286
  • Dropdown component does not show tooltips for long options via keyboard navigation Dropdown component does not show tooltips for long options via keyboard navigation #11248
• Tooltip dismisses prematurely Tooltip dismisses prematurely  #14694
• Tooltip component does not resize when the window becomes smaller Tooltip component does not resize when the window becomes smaller #14575
• tooltipHostProps.content is not applied for CommandBar button with iconOnly=false tooltipHostProps.content is not applied for CommandBar button with iconOnly=false #13877
• CommandBar: Action tooltip shown for split button CommandBar: Action tooltip shown for split button #13598
• Tooltip cannot be interacted with when displayed on pressed button Tooltip cannot be interacted with when displayed on pressed button #12285
  • This is a complex issue we might need a bit of a discussion around whether tooltips are or are not focusable, and what that means for how interaction with them should work.
• API surface for Tooltip/Callout doesn't allow proper position of beak even with DirectionalHint.bottomLeftEdge API surface for Tooltip/Callout doesn't allow proper position of beak even with DirectionalHint.bottomLeftEdge #7970

Understood issues that need fixing

• TooltipHost renders native Tooltip in Safari with OverflowMode.Self TooltipHost renders native Tooltip in Safari with OverflowMode.Self #13868
• Tooltip reappears without hover after tab switch Tooltip reappears without hover after tab switch #13541
• Native props in TooltipHost are misleading Native props in TooltipHost are misleading #12971
• TooltipHost: Default display to inline-block TooltipHost: Default display to inline-block #10189
  • Should confirm we want this to be default
• Tooltips do not dismiss on ctrl Tooltips do not dismiss on ctrl #14987
• Tooltip documentation unclear on use of Tooltip vs TooltipHost Need example code of <Tooltip />; Only <TooltipHost /> examples are available #14516

Other related issues

• Tooltip onhover of DetailsList item. Tooltip onhover of DetailsList item. #14760
• Tooltip of Persona has different display in Chrome and IE11. Tooltip of Persona has different display in Chrome and IE11. #13087
• Tooltip: moving hover from tooltip back to trigger closes tooltip Tooltip: moving hover from tooltip back to trigger closes tooltip #10240
• Tooltips in overflows Tooltips in overflows #9873

[smhigley]

Re: tooltips dismissing with the ctrl key -- this is indeed what we talked about and settled on as a cross-Microsoft pattern in controls club, so I think it can be considered confirmed :)

Hosting tooltips within tooltips does not do the right thing (dismisses everything.)

"tooltips within tooltips" >>> 😱😱😱

[JustSlone]

Thanks @smhigley. I updated the issue above to move Tooltips do not dismiss on ctrl #14987 to "understood issues we need to fix". Can you update #14987 and confirm the intended behavior is to dismiss tooltips with ctrl.

[jurokapsiar]

something to consider is adding aria-labelledby or aria-describedby to the trigger of the tooltip - this way devs do not have to double the information in the API and would not forget about accessibility. The downside is that if you use one or the other, you need to render tooltip content div always, not only on hover/focus. possible improvement might be to render aria-label if the text is just string. But there is no alternative like this for the description. We currently have this in v0, it would be nice to keep it, at least as optional

[JustSlone]

added to list of understood issues

• Tooltip documentation unclear on use of Tooltip vs TooltipHost Need example code of <Tooltip />; Only <TooltipHost /> examples are available #14516

[msft-fluent-ui-bot]

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.