2

我想在 CSS3 中创建简单的工具提示。

示例：http: //jsfiddle.net/Cg2SX/

示例 HTML（必要时可以更改）：

    <div class="icons">
        <a href="">t <span class="tooltip">Twitter</span></a>
        <a href="">f <span class="tooltip">Facebook</span></a>
        <a href="">g <span class="tooltip">Google+</span></a>
    </div>​

和 CSS：

    .icons { position: absolute; left: 40px; top: 30px; }
    .icons a { text-decoration:none; font-size: 16px; color: #000000; position: relative; margin-right: 70px; border:1px solid red; }
    .icons a:hover { text-decoration:none; }
    .tooltip { background-color: green; color: #FFFFFF; font-family: Arial,sans-serif; font-size: 10px; padding: 2px 8px; bottom: -20px; position: absolute; }​

问题是 - 我不知道如何在共享图标下方居中工具提示（它们将是字体图标）。如果我知道它们的宽度，这不会很复杂，但我不知道。

任何想法表示赞赏。有可能吗？

4

3 回答 3

3

您可以尝试这样做：

更新的小提琴

在 上使用固定（足够大）width，span设置text-align: center它并将文本放在您提供的伪元素中display: inline-block

HTML：

<div class="icons">
    <a href="#">t
        <span class="tooltip" data-text='Twitter'></span>
    </a>
    <a href="#">f
        <span class="tooltip" data-text="Facebook"></span>
    </a>
    <a href="#">g
        <span class="tooltip" data-text='Google+'></span>
    </a>
</div>​

相关CSS：

.icons a {
    display: inline-block;
    position: relative;
    margin-right: 70px;
    width: 16px;
    color: #000;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
}
.tooltip {
    position: absolute;
    bottom: -20px; left: 8px; /* half the width of link */
    margin-left: -35px;
    width: 70px;
    color: #fff;
    font: 10px Arial, sans-serif;
}
.tooltip:after {
    display: inline-block;
    padding: 2px 8px;
    background-color: green;
    content: attr(data-text);
}
于 2012-10-30T21:35:22.797 回答
0

你总是可以做这样的演示：http: //jsfiddle.net/Cg2SX/1/

a我在.iconsdiv 中更新了标签。这是我改变的：

.icons a {
    display:block;
    margin-right:10px /* spacing between a tags - changed from your original code */
    float:left; 
    text-align:center; 
    width:100px; /* you can change this as needed, but it keeps them all uniform*/
    height: 50px; /* Change this to the height of your tallest icon image */
}

然后我span.tooltip相应地更新，我将它添加到你所拥有的：

.tooltip { 
    width:100%;
    padding: 2px 0; /* changed the side padding to 0 since width is 100% & it takes the text-align center from the CSS above on the a tag */
    display:block; /* Made it a block so the width 100% & centered text would work */
}​

这与您的图标图像的确切大小无关 - 它们都可能不同或相同，但只要过度a标签比最高和最宽的图像更宽更高，您就不会有任何问题。

于 2012-10-30T20:01:10.260 回答
-1

你为什么不使用 => width:auto;

于 2012-10-30T21:07:22.450 回答