问题描述
|
我最近有了一个想法,当鼠标悬停在链接上时,可以使用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>
解决方法
我知道这个答案来得太晚了,但是看来您问题的关键是使用:
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