懸停時，工具提示顯示圖像？

Question

我希望完成的是編寫一個小的jQuery腳本，它允許我獲取塊的內容並在有人將鼠標放在它上面時觸發彈出窗口。在本質上，它將成爲一個帶有圖像的工具提示。

我找到的所有教程都是在mouseover上替換圖片，或者是僅包含文本的工具提示。下面是代碼：

$(document).ready(function() { 
    $('div#block-block-14.block').hover(
     function() { 
      this.tip = this.title; 
      $(this).append(
      '<div class="toolTipWrapper">' 
      + '<div class="toolTipContent"></div>' 
      ); 
      this.title = ""; 
      this.width = $(this).width(); 
      $(this).find('.toolTipWrapper').css({left:this.width-22}) 
      $('.toolTipWrapper').fadeIn(300); 
     }, 
      function() { 
       $('.toolTipWrapper').fadeOut(100); 
       $(this).children().remove(); 
        this.title = this.tip; 
      } 
      ); 
}); 

這裏是CSS代碼：

div#block-block-14.block{ background:url(../images/QuadChartDropShadow.png);} 
.toolTipWrapper{width:175px;position:absolute;top:20px;display:none;color:#FFF;font-weight:bold;font-size:9pt} 
.toolTipContent{padding: 8 px 15px; background:url(../images/QuadCharDropShadow.png) no-repeat top;} 

Answer 1

對於提示，我會一直推薦qTip2。實現起來很簡單，最好的是創建者是支持的，我在幫助和支持論壇上報告的每個問題總是有迴應:)

要在工具提示中呈現圖像很容易，可以通過多種方式完成

<img id='tooltip1' style="display:none;" src="../../Content/HomePage/aboutshop.JPG" /> 

$('#aboutshop').qtip({ 
    content: { 
    text: $('#tooltip1') 
    } 
}); 

或者

$('a').qtip({ 
     content: { 
     text: '<img src="test.png" />' 
     } 
    }); 

您可以查看更多的功能在這裏：http://craigsworks.com/projects/qtip2/docs/

希望這有助於:)