2

このツールチップを CSS だけで使用しています。これは素晴らしいことです。このツールチップを使用して大きなサイズの画像を表示していますが、問題は、このツールチップにより、Web サイトの読み込み時にすべての画像が読み込まれていたため、Web サイトが遅くなることです...だから、私の質問はツールチップを表示する方法ですホバーしたときだけコンテンツ？そのため、サイトが読み込まれるときに画像が読み込まれません。
私はこの記事に従っていますjqueryuiツールチップajaxコールバックとこの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を使用して画像を表示/プリロードする場合は、最初に画像の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/

于 2013-02-28T17:00:49.703 に答える