carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.86k stars 1.82k forks source link

[MS Edge] tooltip area is too wide for tooltips that are just a word or two #7549

Closed kocha123 closed 3 years ago

kocha123 commented 3 years ago

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

What package(s) are you using?

Detailed description

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

Screen Shot 2021-01-13 at 10 57 50 AM

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

Screen Shot 2021-01-13 at 10 59 39 AM

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; }

emyarod commented 3 years ago

are you still seeing this on later versions of Carbon?