Carbon: ToolTip Icon: Tooltip in IE is separated from pointer

[aradhikaIbm]

What package(s) are you using?

• [x ] carbon-components
• [ ] carbon-components-react

Detailed description

Describe in detail the issue you're having.
Looking at the tooltip in IE, the tooltip is separated from the pointer (triangle).

Is this issue related to a specific component?
tooltip icon
https://angular.carbondesignsystem.com/?path=/story/tooltip-icon--basic

I've been asked to open an issue here since seems to be an issue with the base css.

What did you expect to happen? What happened instead? What would you like to
see changed?
Tooltip attached to the tip. In IE the bottom tooltip placement is looking like a top since its separated from the tip

What browser are you working in?
IE 11

What version of the Carbon Design System are you using?
v10.4.1
carbon-angular - 3.13.2

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

Angular issue that I opened up: https://github.com/IBM/carbon-components-angular/issues/684

[asudoh]

Hi 👋 would you want to enter this issue at https://github.com/IBM/carbon-components-angular/issues instead of here? Thanks!

[aradhikaIbm]

I already have and they have asked me to open it here since the base/core css.

[asudoh]

I see, thank you for clarifying! How much separate is it from the pointer? Wanted to see how major the problem is.

[aradhikaIbm]

In the carbon design page:

https://www.carbondesignsystem.com/components/tooltip/code

Its an issue on the tooltip icon version. That tooltlip is suppose to be bottom aligned not top.

[tw15egan]

Not able to get the dev env up and running locally in IE11, but after doing some research it looks like this is the case:

IE10, IE11, and Edge < 14 don't support using calc() inside a transform.

And we seem . to be using that quite a bit here: https://github.com/carbon-design-system/carbon/blob/0a22e222a5e5b6d38b1b7e0aede435700a5c8d4c/packages/components/src/globals/scss/_tooltip.scss#L197-L265

It also seems like max-content isn't supported by IE11 either:

https://github.com/carbon-design-system/carbon/blob/0a22e222a5e5b6d38b1b7e0aede435700a5c8d4c/packages/components/src/globals/scss/_tooltip.scss#L88

[emyarod]

taking a look at this, there may be a way to avoid calc inside of transform

[emyarod]

regarding the width: max-content issue, a workaround right now would be to set the tooltip display rule to inline-block instead of flex and changing the width rule for the tooltip body to a supported value

opened #3739 to address the tooltip position calculation problem

[elizabethsjudd]

@emyarod is there an issue to fix the the width: max-content issue in the backlog already or does that need to be created? We've ran in to the issue in Watson Health as well and didn't want to create a duplicate issue.