使用CSS在线显示工具提示

Question

我正在开发一个带有工具提示功能的粘边栏菜单。在Chrome和Safari中，它渲染正确，但工具提示在IE中偏离中心。

以下是导致此问题的代码：

/* Vertically center tooltip content for left/right tooltips */
.tooltip-left:after, {
  margin-left: 0;
  margin-bottom: -16px; /* different */
}

以上内容在Chrome和Safari中呈现正常，但不在IE中。只有当我这样声明它才能在IE中起作用

display: inline-block

有人可以使用{{1}}提供有关如何正确编码的建议吗？

这里有完整的Fiidle：https://jsfiddle.net/gavinfriel/jxg4th86/3/

Answer 1

设置bottom:0代替bottom:50%（或替换为top:0）可以解决所有浏览器中的问题。尝试一下，看看结果是否符合您的要求？