使用 translate3d 时材料设计精简版工具提示中断答案

【问题标题】：Material designs lite tooltip breaking when using translate3d使用 translate3d 时材料设计精简版工具提示中断
【发布时间】：2016-11-21 01:09:18
【问题描述】：

我正在尝试使用 MDL tooltips，但在使用 translate3d 属性（我在某些动画中使用）时它们无法按预期工作

Reproduction online

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

【问题讨论】：

没有得到你想要的:(

标签： css material-design material-design-lite

【解决方案1】：

这是因为在material.js 中悬停时如何动态计算工具提示位置。请参阅：https://github.com/google/material-design-lite/blob/mdl-1.x/src/tooltip/tooltip.js#L69

当您将transform 样式添加到parent <div> 时，该样式会传递到<div> 工具提示并弄乱工具提示位置计算。

我的建议是将translate3d 样式更改为内部<div>，这样就不会影响tooltip <div>。

【讨论】：

translate3d 属性应用于工具提示所在的整个元素。我的目的不仅仅是移动工具提示，而是移动它的整个容器元素及其所有子元素。似乎 Boostrap 工具提示在计算这些东西方面做得更好！
不幸的是，这就是 MDL 的当前限制。感谢您在 Github 中提出问题。