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

Question

我最近有一个使用CSS伪类的想法:hover当鼠标悬停在链接上时， :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> 

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

我在谷歌上做了一些搜索，发现了一些人们做过的工作的例子（ 这个例子与我所得到的相似），但似乎没有人解决我所拥有的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只想扩展到链接的宽度。 如果你在a之后放置span ，你可以接近你想要做的但是你必须设置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

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

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

Answer 4

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

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

查看纯CSS解决方案： JS BIN

感谢trezy.com

Answer 5

即使这个问题已经有点老了，我建议以下妥协：
只需使用max-width：200px; 最小宽度：300％; 或者，
而最小宽度可能导致高于最大宽度。
试一试。
这样你就不可能有完全液体的工具提示，但宽度与包含链接元素的宽度有相关性。
就光学愉悦而言，这种方法可能是有价值的。

---

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