Material designs lite tooltip breaking when using translate3d

Question

I'm trying to use MDL tooltips but they are failing to work as expected when using the translate3d property (which I use in some animations)

Reproduction online

.container{
    position:absolute;
    left: 100px;
    top: 100px;
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0);
}

Answer 1

The reason for this is due to how the tooltip position is dynamically calculated on hovering in material.js. Please see: https://github.com/google/material-design-lite/blob/mdl-1.x/src/tooltip/tooltip.js#L69

When you add a transform styling to the parent <div> that got pass on to the <div> tooltip and mess up the tooltip position calculation.

My suggestion is change the translate3d styling to the inner <div> only so it will not affect the tooltip <div>.