css - 仅使用 CSS 的工具提示

Question

我正在尝试仅使用 CSS 为锚标记制作工具提示。我已经走到这一步了。我正在尝试实现将框和提示箭头准确定位在中心的功能，无论文本的长度是多少。

上图是我想要得到的。我试过保留它，width:auto但它也不起作用。

Answer 1

body
{overflow-x:hidden;}

div
{position:relative;width:700px;border:1px red solid;padding:20px;margin:0 auto;text-align:justify;}

a
{position:relative;white-space:nowrap;}

a > span.tooltip
{
    position: absolute;
    white-space: normal;
    width: 100%;
    top: 130%;
    left: 0;
}

a > span.tooltip > span
{
    position: absolute;
    top: 0;
    right: 0;
    text-align: center;
    bottom: 0;
    left: -500%;
    width: 1100%;
}

a > span.tooltip > span > span
{
    display: inline-block;
    background: black;
    border-radius: 4px;
    padding: 10px;
    color: white;
    max-width: 300px;
}

演示：http: //jsfiddle.net/b2Yqf/

适用于 msie 7 8 9 10、firefox、chrome

不是你想要的……因为标记是用三个嵌套<span>的 s 组成的……但是是的。可以做到的！

Answer 2

您面临的主要问题是您需要一个white-space: nowrapthis 让您了解@robooneus 的hint.css。我也无法弄清楚居中。任何宽度或边距都相对于“工具提示”链接的宽度。指向您找到图像的位置的链接也可能会有所帮助，因此我们可以研究来源。

EDIT1： 此外，margin-left: -6px箭头上的a（：之前）以单词工具提示为中心，它抵消了边界向右的移动。

Answer 3

我认为您在拥有width:auto;.

如果你声明一个宽度，你可以简单地定位工具提示：

.tooltip:hover:after {
    width:100px; /* whatever you want */
    left:50%;
    margin-left:-50px; /* half the width */
}

编辑

正如@Alexander 在他的回答中所说，使用重新定位工具提示箭头margin-left也是一个好主意，因为它稍微偏离了中心left:50%。