2

我将这个工具提示与 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');
     });
}
});

但无法理解如何在工具提示中使用它......有什么想法吗？

4

1 回答 1

4

如果要使用 JQuery 显示/预加载图像，可以data-*先将图像 URL 保存在 tooltip 的属性中，并将值显示为<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-28T17:00:49.703 回答