當其懸停時顯示工具提示內容

我正在使用此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

當其懸停時顯示工具提示內容

回答

相關問題