以小图标为中心的弹出式工具提示

Question

我在悬停（或有时点击）时遇到了特定类型的下拉工具提示，需要通过一个小图标激活，例如20x20像素。设计看起来像这样：

因此，正如您所看到的，显示的框会悬停在页面上的所有其他内容上。宽度和高度各不相同，具体取决于内容。

现在，像往常一样，挑战是仅使用CSS来实现这一目标。幸运的是，在这种情况下，我只担心最前沿的浏览器，并且根本不需要考虑移动设备。在过去，我因为时间不够而畏缩，并在左侧放置顶部“指针”元素（以图标为中心），并将整个框对齐到图标的左边缘 - 但是这远非最佳。

我喜欢这里的任何建议，这对我未来的武器库来说是一个很棒的解决方案。

Answer 1

我认为你需要知道宽度，以便将盒子置于比自身小的元素中心。如果您只考虑最前沿的浏览器，那么必需的JS将会很简单快速地编写和运行。

我对此类元素的标准居中技术是：

.icon {position:relative;}
.popUp {position:absolute;
    width:200px;
    left:50%;
    margin-left:-100px; /* Half the width */
}

要使其工作，您需要做的就是使用JS检测内容的宽度，并相应地设置左边距。我相信你可以为碰巧有JS禁用/不可用的任何用户设置一些合理的默认值。