html - 如何使纯 css float 工具提示(绝对定位跨度)动态调整大小以适应文本

Question

我最近想到了使用 CSS 伪类 :hover 来在鼠标悬停在链接上时显示样式化的工具提示。

链接的基本代码如下所示:

.hasTooltip {
    position:relative;
}
.hasTooltip span {
    display:none;
}

.hasTooltip:hover span {
    display:block;
    background-color:black;
    border-radius:5px;
    color:white;
    box-shadow:1px 1px 3px gray;
    position:absolute;
    padding:5px;
    top:1.3em;
    left:0px;   
    max-width:200px; /* I don't want the width to be too large... */
}

<a href="#" class="hasTooltip">This link has a tooltip!<span>This is the tooltip text!</span></a> 

The result is exactly what I want ，但有一个烦人的问题:跨度不会扩展以容纳文本，如果我不指定宽度，文本就会被压扁。

我在 Google 上进行了一些搜索，发现了一些人们所做的工作示例(this example 与我得到的非常相似)，但似乎没有人解决过 span我遇到的宽度问题。

Answer 1

我知道这个答案已经很晚了，但看来您的问题的关键是使用:

white-space: nowrap;

在你的跨度内，摆脱任何类型的宽度定义。当然，这样做的缺点是工具提示只能支持单行。如果您想要多行解决方案，您很可能必须使用 javascript。

下面是这个方法的一个例子: http://jsbin.com/oxamez/1/edit

一个额外的好处是它适用于 IE7。如果您不需要支持 IE7，我建议将 span 和 img 样式折叠到 .tooltip 的 :before 和 :after 中。然后您可以使用 data-* 属性填充文本。