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

Question

我最近有一个想法,:hover当鼠标悬停在链接上时,使用CSS伪类来显示样式化的工具提示.

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

.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> 

结果正是我想要的,但有一个恼人的问题:跨度不扩展以容纳文本,如果我没有指定宽度,文本被压扁.

我在Google上做了一些搜索,发现了一些人们做过的工作的例子(这个例子与我得到的相似),但似乎没有人span解决我所遇到的宽度问题.

Answer 1

我知道这个答案非常晚,但看起来你的问题的关键是使用:

white-space: nowrap;

在您的范围内,并摆脱任何类型的宽度定义.当然,缺点是工具提示只能支持一行.如果你想要一个多线解决方案,你很可能必须使用javascript.

以下是此方法的示例:http: //jsbin.com/oxamez/1/edit

另外一个好处是,它一直可以运行到IE7.如果你不需要支持IE7,我建议折叠跨度,并将img样式分为:before,和:after.tooltip.然后,您可以使用data-*属性填充文本.

Answer 2

我不认为纯CSS有一个完美的解决方案.第一个问题是当你放置标签span内部时,只想扩展到链接的宽度.如果你放置后可以接近你想要做的但是你必须设置然后必须设置一个负边距来滑动工具提示.但是,它将是一个固定的设置,因此它不会完全位于每个链接的开头.aspanspanamargin-top: 1.3em

我掀起了一个left动态设置的jQuery解决方案(以及一个很好的小渐变效果,以获得良好的衡量标准).

演示:http://jsfiddle.net/wdm954/9jaZL/7/

$('.hasTooltip').hover(function() {
    var offset = $(this).offset();
    $(this).next('span').fadeIn(200).addClass('showTooltip');
    $(this).next('span').css('left', offset.left + 'px');
}, function() {
    $(this).next('span').fadeOut(200);
});