css - 悬停时显示工具提示内容

Question

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

但无法理解如何将其与工具提示一起使用......有什么想法吗？

Answer 1

如果你想使用JQuery来显示/预加载图像，可以将图像URL保存在data-*中首先在工具提示中添加属性，并将值显示为 <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/