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

| 我最近有了一个想法，当鼠标悬停在链接上时，可以使用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>

已邀请:

5 个回复

掏得透垦滩

我知道这个答案来得太晚了，但是看来您问题的关键是使用：

white-space: nowrap;

在您的跨度之内，并摆脱任何宽度定义。当然，这样做的缺点是工具提示只能支持一条直线。如果您需要多行解决方案，则很可能必须使用javascript。这是此方法的示例： http://jsbin.com/oxamez/1/edit 一个额外的好处是，它一直可以向下运行到IE7。如果您不需要支持IE7，建议将.tooltip的span和img样式折叠为：before和：after。然后，您可以使用data- *属性填充文本。

赐黄

我不认为使用纯CSS可以完美解决此问题。第一个问题是，当将ѭ4放置在a标记内时，span只想扩展到链接的宽度。如果将ѭ4放置在ѭ5之后，则可能会接近您要尝试的操作，但是您必须设置margin-top: 1.3em，然后必须设置负边距以将工具提示向左滑动。但是，它将是一个固定设置，因此它不会精确地位于每个链接的开头。我提出了一个jQuery解决方案，该解决方案可以动态设置left（还有一个很好的淡入淡出效果，可以很好地衡量）。演示：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);
});

抢垢洛韧

这些工具提示也可以轻松集成到Wordpress主题中。只需将CSS复制到您的样式中即可。 CSS文件，并且在创建帖子时，只需借助HTML代码并创建自己的工具提示即可。其余都是样式，可以根据自己的选择进行更改。您也可以在工具提示框中使用图像。 http://www.handycss.com/how/how-to-create-a-pure-css-tooltip/

缝皋

即使这个问题已经有点老了，我还是建议以下折衷方案：只需使用max-width：200px;最小宽度：300％；或者，而最小宽度可能会比最大宽度高。弄清楚。这样，您可能不会完全使用液体工具提示，但是宽度与包含的链接元素的宽度具有某种相关性。就光学舒适度而言，该方法可能是有价值的。编辑：好吧，我必须承认，我写的是胡说八道。当最小宽度可以大于最大宽度时，则没有意义。因此，仅将最小宽度设置为百分比即可实现我试图建议的结果。抱歉

惭法搽

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

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

查看纯CSS解决方案：JS BIN 归功于trezy.com

要回复问题请先登录或注册

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

5 个回复

发起人

tooltip

html

css

问题状态

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

与内容相关的链接

5 个回复

发起人

tooltip

html

css

问题状态