当其悬停时显示工具提示内容

我正在使用此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'); 
    }); 
} 
});

，但无法理解如何使用工具提示...任何想法用这个？

来源

2013-02-28 Max Muller

很难分辨出正在加载的图片，但减少请求数量的一种方法是对图片使用精灵，可能是在工具提示中使用的精灵。 – Ben 2013-02-28 16:48:02

如果你想使用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/

来源

2013-02-28 17:00:49

感谢的人，其伟大..一个问题，我可以显示一个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

当其悬停时显示工具提示内容

回答

相关问题