我想用 CSS3 创建简单的工具提示。
示例 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; }
问题是 - 我不知道如何将工具提示置于共享图标下方(它们将是字体图标)。如果我知道它们的宽度,事情就不会很复杂,但我不知道。
任何想法表示赞赏。到底有可能吗?
最佳答案
你可以尝试这样做:
updated fiddle
在 span
上使用固定(足够大)width
,在其上设置 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);
}
关于html - 宽度未知的水平定位(和小的父元素),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13146509/