仅使用CSS的工具提示

Question

我正在尝试使用CSS制作锚标记的工具提示。我来this远了。无论文本的长度如何，我都试图实现将盒子和尖箭头准确定位在中心的功能。

上面的图片是我想要的。 我已经尝试保留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>制作的......但是是的。它可以做到！

Answer 2

你面临的主要问题是你需要white-space: nowrap这可以让你了解@robooneus的hint.css。尽管如此，我无法弄清楚这里的中心位置。任何宽度或边距都相对于“工具提示”链接的宽度。您找到图像的链接也可能有用，因此我们可以研究来源。

<强> EDIT1： 此外，箭头上的margin-left: -6px（前面的：）在工具提示一词的中心，它抵消了边界向右移动。

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%的中心。