Html 如何使纯 css 浮动工具提示（绝对定位的跨度）动态调整大小以适应文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5683364/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make pure css floating tooltips (absolutely positioned span) dynamically resize to accommodate text
提问by Titus
I recently had an idea for using the CSS pseudo-class :hoverto display a styled tooltip when the mouse is hovered over a link.
我最近有一个想法，:hover当鼠标悬停在链接上时，使用 CSS 伪类来显示样式化的工具提示。
The basic code for the link looks like this:
链接的基本代码如下所示：
.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, but with one annoying problem: the span does not expand to accommodate text, and if I don't specify a width, the text is squashed.
结果正是我想要的，但有一个烦人的问题：跨度不会扩展以容纳文本，如果我不指定宽度，文本将被压扁。
I did some searching on Google, found a couple examples of work people had done (this exampleis creepily similar to what I've gotten), but no one seems to have addressed the spanwidth problem I'm having.
我在谷歌上做了一些搜索，找到了一些人们所做的工作的例子（这个例子与我得到的非常相似），但似乎没有人span解决我遇到的宽度问题。
采纳答案by schadeck
I know this answer is extremely late, but it appears the key to your issue would be to use:
我知道这个答案已经很晚了，但您的问题的关键似乎是使用：
white-space: nowrap;
inside of your span, and get rid of any sort of width definition. Of course the drawback to this will be that the tooltip will only be able to support a single line. If you want a multiline solution you will most likely have to use javascript.
在您的跨度内，并摆脱任何类型的宽度定义。当然，这样做的缺点是工具提示只能支持单行。如果您想要多行解决方案，您很可能必须使用 javascript。
Here is an example of of this method: http://jsbin.com/oxamez/1/edit
这是此方法的示例：http: //jsbin.com/oxamez/1/edit
An added bonus is that this works all the way down to IE7. If you do not need to support IE7, I would suggest folding the span, and img styles into a :before, and :after for the .tooltip. Then you can populate the text using the data-* attribute.
一个额外的好处是，这一直适用于 IE7。如果您不需要支持 IE7，我建议将 span 和 img 样式折叠成 :before 和 :after 以用于 .tooltip。然后您可以使用 data-* 属性填充文本。
回答by wdm
I don't think there's a perfect solution to this problem with pure CSS. The first problem is that when you place the spaninside the atag the spanonly wants to expand as far as the width of the link. If you place the spanafter the the ait's possible to get close to what you're trying to do but you'll have to set the margin-top: 1.3emand then have to set a negative margin to slide the tooltip left. However, it's going to be a fixed setting so it won't sit exactly at the start of each link.
我认为纯 CSS 没有完美的解决方案。第一个问题是，当您将标签放在span内部时，a它span只想扩展到链接的宽度。如果您将 the 放在 thespan之后，a则可能会接近您要执行的操作，但您必须设置 the margin-top: 1.3em，然后必须设置负边距以向左滑动工具提示。但是，它将是一个固定设置，因此它不会恰好位于每个链接的开头。
I whipped up a jQuery solution that sets leftdynamically (and a nice little fade effect for good measure).
我提出了一个left动态设置的 jQuery 解决方案（以及一个很好的淡化效果以进行良好的衡量）。
Demo: http://jsfiddle.net/wdm954/9jaZL/7/
演示：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);
});
回答by Nabeela Ansari
These tool tips can also be integrated into a word press theme easily. Just copy the CSS into your style. Css file and when creating your posts, just take help of the HTML code and create your own tool tips. Rest is all styling, which can be altered according to your own choice. You may also use images inside the tool tip boxes.
这些工具提示也可以轻松集成到 wordpress 主题中。只需将 CSS 复制到您的样式中即可。Css 文件，在创建帖子时，只需借助 HTML 代码并创建您自己的工具提示即可。其余都是造型，可以根据自己的选择进行更改。您还可以在工具提示框中使用图像。
http://www.handycss.com/how/how-to-create-a-pure-css-tooltip/
http://www.handycss.com/how/how-to-create-a-pure-css-tooltip/
回答by noRiddle
Even though this question is a bit older already, I would suggest the following compromise:
Just use max-width: 200px; and min-width: 300%; or so,
whereas the min-width could result higher than the max-width.
Just figure it out.
This way you could not have entirely liquid tooltips but the width would stand in kind of a correlation with the width of the containing link element.
In terms of optical pleasantness this approach could be of value.
即使这个问题已经有点老了，我还是建议以下折衷方案：
只需使用 max-width: 200px; 和最小宽度：300%；左右，
而最小宽度可能会高于最大宽度。
想办法吧。
这样你就不能拥有完全流动的工具提示，但宽度会与包含链接元素的宽度存在某种相关性。
就光学舒适度而言，这种方法可能是有价值的。
edit:
Well I must admit it is nonsense what I wrote. When the min-width can be higher than the max-width, there is no sense to it.
So just putting the min-width in percent would achieve what I tried to suggest.
Sorry for that.
编辑：
好吧，我必须承认我写的东西是无稽之谈。当 min-width 可以高于 max-width 时，就没有意义了。因此，只需将最小宽度以百分比表示即可实现我的建议。对不起。
回答by Adrian P.
I found this and it was working for me. It's a good solution when you have a lot of elements and jquery plugins on the same page and you can't work with
我找到了这个，它对我有用。当您在同一页面上有很多元素和 jquery 插件而您无法使用时，这是一个很好的解决方案
<a href="#">Text <span>Tooltip</span></a>
View pure CSS solution: JS BIN
查看纯CSS解决方案：JS BIN
Credit to trezy.com
