Closed kocha123 closed 3 years ago
MS Edge: tooltip area is too wide for tooltips that are just a word or two
carbon-components
carbon-components-react
Describe in detail the issue you're having. Only in MS Edge, tooltip 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
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
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; }
@supports (-ms-ime-align:auto)
width: auto
are you still seeing this on later versions of Carbon?
MS Edge: tooltip area is too wide for tooltips that are just a word or two
What package(s) are you using?
carbon-components
carbon-components-react
(7.17.0)Detailed description
In comparison, here is what it looks like in Google Chrome (on Windows10)
Steps to reproduce the issue
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; }
@supports (-ms-ime-align:auto)
width: auto