当其悬停时显示工具提示内容
我正在使用此Tooltips with Just CSS这太棒了。我使用这个工具提示来显示大尺寸图像,但问题是,这个工具提示让我的网站变得更慢,因为这用于加载网站加载时的所有图像...所以,我的问题是如何显示工具提示内容只有当它悬停?因此,网站加载时图片不会加载。
我按照这篇文章A little guide about jqueryui tooltip ajax callback也是这个jsfiddle当其悬停时显示工具提示内容
$('#tippy').tooltip({
content: '... waiting on ajax ...',
open: function(evt, ui) {
var elem = $(this);
$.ajax('/echo/html').always(function() {
elem.tooltip('option', 'content', 'Ajax call complete');
});
}
});
,但无法理解如何使用工具提示...任何想法用这个?
如果你想使用jQuery来显示/预加载图像,你可以先保存在工具提示中data-*
属性附加伤害的图像URL,并显示值作为<img>
标签:
<a href="#" class="has-tooltip" data-image="http://lorempixel.com/200/200/food/1">link text</a>
jQuery的:
$(document).ready(function() {
$('.has-tooltip').hover(function() {
$(this).find('.tooltip').html('<img src="'+$(this).data('image')+'" alt="loading...">').fadeIn();
}, function() {
$(this).find('.tooltip').hide();
}).append('<span class="tooltip"></span>');
});
而CSS:
.has-tooltip {
position:relative;
}
.has-tooltip .tooltip {
display:none;
padding:10px;
border:1px solid black;
background-color:gray;
position:absolute;
top:100%;
left:10%;
z-index:999;
}
这里这是一个演示:http://jsfiddle.net/tovic/tvHT3/62/
感谢的人,其伟大..一个问题,我可以显示一个div标签,而不是一个简单的图像...谢谢 – 2013-02-28 17:04:43
是的,你可以。或者,您可以创建自己的工具提示标记,并在HTML属性中保存一些所需的内容>> http://jsfiddle.net/tovic/tvHT3/64/ – 2013-02-28 17:14:59
再次感谢:) – 2013-02-28 17:55:13
很难分辨出正在加载的图片,但减少请求数量的一种方法是对图片使用精灵,可能是在工具提示中使用的精灵。 – Ben 2013-02-28 16:48:02