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，但有一个恼人的问题：跨度不会扩展以容纳文本，如果我没有指定宽度，则会压缩文本。

我在谷歌上做了一些搜索，发现了一些人们做过的工作的例子（this example与我得到的相似），但似乎没有人解决span宽度我遇到的问题。

Answer 1

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

white-space: nowrap;

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

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

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

Answer 2

我不认为纯CSS有一个完美的解决方案。第一个问题是，当您将span放在a标记内时，span只想扩展到链接的宽度。如果您在span之后放置a，可以接近您要尝试的内容，但您必须设置margin-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);
});

Answer 3

这些工具提示也可以轻松集成到文字新闻主题中。只需将CSS复制到您的样式中即可。 Css文件和创建帖子时，只需获取HTML代码的帮助并创建自己的工具提示。休息是所有造型，可以根据您自己的选择进行更改。您也可以在工具提示框内使用图像。

http://www.handycss.com/how/how-to-create-a-pure-css-tooltip/

Answer 4

即使这个问题已经有点老了，我还是建议以下妥协：
只需使用max-width：200px;最小宽度：300％;左右，
而最小宽度可能会高于最大宽度搞清楚。
这样您就无法获得完全液态的工具提示，但宽度与包含链接元素的宽度有相关性。
就光学愉悦而言，这种方法可能是有价值的。

修改的：
好吧，我必须承认我写的是胡说八道。当最小宽度可以高于最大宽度时，没有任何意义。因此，只需将最小宽度设为百分比即可实现我的建议。对不起。

Answer 5

我找到了这个，它对我有用。当你在同一页面上有很多元素和jquery插件而你无法使用时，这是一个很好的解决方案

<a href="#">Text <span>Tooltip</span></a>

查看纯CSS解决方案：JS BIN

归功于trezy.com

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

5 个答案: