MS Edge: tooltip area is too wide for tooltip text that is just a word or two

[kocha123]

MS Edge: tooltip area is too wide for tooltip text that is just a word or two

What package(s) are you using?

• [ ] carbon-components
• [x] carbon-components-react (7.17.0)

Detailed description

Describe in detail the issue you're having. Only in MS Edge, tooltip area (black), for short text is too wide. eg

In comparison, here is what it looks like in Google Chrome (on Windows10)

Is this issue related to a specific component? Related to Tooltip

What did you expect to happen? What happened instead? What would you like to see changed? The tooltip width should auto-size to the tooltip text.

What browser are you working in? Issue only occurs in MS Edge, and not Google Chrome.

What version of the Carbon Design System are you using? carbon-components-react (7.17.0)

What offering/product do you work on? Any pressing ship or release dates we should be aware of? IBM Cognos Analytics

Steps to reproduce the issue

1. View a tooltip in MS Edge browser, where text is 10 characters or less.
2. Note the tooltip width is too wide.

Additional information

Examining the style that are used, the following is noted:

/@supports (-ms-ime-align:auto)/ .bx--btn.bx--btn--icon-only.bx--tooltiptrigger + .bx--assistive-text, .bx--btn.bx--btn--icon-only.bx--tooltiptrigger .bx--assistive-text, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger::after { width: 13rem; }

• The style picked up in MS Edge is due to @supports (-ms-ime-align:auto)
• The width is hard-coded to 13rem
• The fix is to change to width: auto

[emyarod]

closing as a duplicate of #7549