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显示/预加载图片，可以先将图片网址保存在工具提示的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/

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

1 个答案: