React-tooltip: Tooltip not rendering properly on IE 11

[kdhallu]

The issue is reproducible even on the demo page when we are on internet explorer

[aviranmz]

any update/solution for this issue?

[kdhallu]

Yes the issue is because of transform property which is causing the issue. Removing the transform property renders tooltip properly

[aviranmz]

tested on 3.9.2 and its not working

[aviranmz]

anyone?

[aviranmz]

trying last time ....

[JannVazTor]

Any updates on this?

[aronhelser]

@kdhallu is this because of a recent change? Is there a version that does work?

I am not working on react-tooltip, but I will gladly accept PRs that fix any issues you may have.

[kdhallu]

The issue was because of transform property. In my project i removed the transform project and it started working properly

[kdhallu]

Probably because of transform property it is not able to get the correct position

[aronhelser]

OK, so if someone wants to look at the tooltip reacting correctly to an
element with a transform, that would be helpful! Please post if you have
ideas how to solve this.

On Thu, Dec 5, 2019 at 3:58 AM ketan dhallu [e-mail]
wrote:

Probably because of transform property it is not able to get the correct
position

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/wwayne/react-tooltip/issues/515?email_source=notifications&email_token=AEX6THJO7FL6TAXBIL6QHSLQXC7DVA5CNFSM4I7V5SN2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEF77OWA#issuecomment-562034520,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AEX6THNMZ4RQQKS3M5E4ASDQXC7DVANCNFSM4I7V5SNQ
.

[aviranmz]

The issue was because of transform property. In my project i removed the transform project and it started working properly

What do you mean remove ? can you please share

[xblxldev]

Hi does anyone know what "removing transform" means? @kdhallu can you provide some code that would be good thank you!

[roggervalf]

Already fixed in the last release https://wwayne.github.io/react-tooltip/

[bosunolanrewaju]

Already fixed in the last release https://wwayne.github.io/react-tooltip/

This page is not accessible on IE 11. And I still get a wrong positioning on IE 11.
Any help to get the correct positioning on IE 11 will be appreciated.

[Stanley-Okwii]

Already fixed in the last release https://wwayne.github.io/react-tooltip/

This page is not accessible on IE 11. And I still get a wrong positioning on IE 11.
Any help to get the correct positioning on IE 11 will be appreciated.

@roggervalf ,I get this ☝🏽 same issue after updating to the latest version of react tooltip...

[ketandhallu]

Hello Guys,
What i did to fix it was i removed the transform css property and it started to work correctly.
I hope this helps

[ketandhallu]

transform: translate3d(5px, 5px, 5px);

This css was causing the issue. I removed this css and it worked fine

[Jaguar1]

transform: translate3d(5px, 5px, 5px);

This css was causing the issue. I removed this css and it worked fine

Hello, where do you remove this css property from? Please explain.

[kdhallu]

this css was attached automatically by the plugin so i wrote a additional css to remove it using !important

[Jaguar1]

Thank you for answering! It is strange I cannot find such a property inside the attached style block, but I may be looking at a wrong place. Could you please advise. This is the attached style:

<div class="__react_component_tooltip t8716d4a5-2c20-421b-817e-3d4354d1c59e place-right type-custom" id="some_unique_id" data-id="tooltip" style="left: 450px; top: 698px;">
   <style>
    .t8716d4a5-2c20-421b-817e-3d4354d1c59e {
        color: #fff;
        background: #25465e;
        border: 1px solid transparent;
    }
   .t8716d4a5-2c20-421b-817e-3d4354d1c59e.place-top {
        margin-top: -10px;
    }
    .t8716d4a5-2c20-421b-817e-3d4354d1c59e.place-top::before {
        border-top: 8px solid transparent;
    }
    .t8716d4a5-2c20-421b-817e-3d4354d1c59e.place-top::after {
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        bottom: -6px;
        left: 50%;
        margin-left: -8px;
        border-top-color: #25465e;
        border-top-style: solid;
        border-top-width: 6px;
    }

    .t8716d4a5-2c20-421b-817e-3d4354d1c59e.place-bottom {
        margin-top: 10px;
    }
    .t8716d4a5-2c20-421b-817e-3d4354d1c59e.place-bottom::before {
        border-bottom: 8px solid transparent;
    }
    .t8716d4a5-2c20-421b-817e-3d4354d1c59e.place-bottom::after {
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        top: -6px;
        left: 50%;
        margin-left: -8px;
        border-bottom-color: #25465e;
        border-bottom-style: solid;
        border-bottom-width: 6px;
    }

    .t8716d4a5-2c20-421b-817e-3d4354d1c59e.place-left {
        margin-left: -10px;
    }
    .t8716d4a5-2c20-421b-817e-3d4354d1c59e.place-left::before {
        border-left: 8px solid transparent;
    }
    .t8716d4a5-2c20-421b-817e-3d4354d1c59e.place-left::after {
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        right: -6px;
        top: 50%;
        margin-top: -4px;
        border-left-color: #25465e;
        border-left-style: solid;
        border-left-width: 6px;
    }

    .t8716d4a5-2c20-421b-817e-3d4354d1c59e.place-right {
        margin-left: 10px;
    }
    .t8716d4a5-2c20-421b-817e-3d4354d1c59e.place-right::before {
        border-right: 8px solid transparent;
    }
    .t8716d4a5-2c20-421b-817e-3d4354d1c59e.place-right::after {
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        left: -6px;
        top: 50%;
        margin-top: -4px;
        border-right-color: #25465e;
        border-right-style: solid;
        border-right-width: 6px;
    }
  </style>
// etc.
</div>

Is this the correct style section? I do not see such a CSS property here.

Best regards,
Vladimir