數據表工具提示圖片

Question

我有以下的表，我需要顯示基於獨特的員工ID的人圖片的工具提示：

下面的代碼工作的問候顯示正確的URL我怎麼能做出提示顯示網址的img，而不僅僅是url的文本。

代碼如下：

$('#ctl00_m_g_615c4803_912c_4ba4_8415_8082f2df612c_ctl00_resultsGrid').dataTable(); 

      $('#ctl00_m_g_615c4803_912c_4ba4_8415_8082f2df612c_ctl00_resultsGrid tbody tr').each(function() 
      { 
          var nTds = $('td', this);     
          var sn = $(nTds[5]).text(); 
          var urlStart = "<img src='http://portal.blah.local:8081/ColleaguePhotos/"; 
          var urlMiddle = sn; 
          var urlEnd = "/primary.jpg'/>" 
          var url = urlStart + urlMiddle + urlEnd; 
          //alert(url); 
          this.setAttribute('title', url);                    
       }); 
      }); 

輸出工具提示只顯示文本的http：//門戶：8081/ColleaguePhotos/staffnumber/primary.jpg />;

Answer 1

單獨的title屬性不會允許這樣做。

您應該使用工具提示插件：

• 檢查jquery-ui tooltip部件（demo with images here）
• 或qTip2

或尋找其他的

Answer 2

感謝所有我已經從使用您的建議，並找到解決方案：

this.screenshotPreview = function(){ 
     /* CONFIG */ 

     xOffset = 10; 
     yOffset = 30; 

    // these 2 variable determine popup's distance from the cursor 
    // you might want to adjust to get the right result 

    /* END CONFIG */ 
    $('#ctl00_m_g_615c4803_912c_4ba4_8415_8082f2df612c_ctl00_resultsGrid tbody tr').hover(function(e){ 
     var nTds = $('td', this);     
       var sn = $(nTds[5]).text(); 
       var urlStart = "<img src='http://portal:8081/ColleaguePhotos/"; 
       var urlMiddle = sn; 
       var urlEnd = "/primary.jpg'/>" 
       var url = urlStart + urlMiddle + urlEnd; 

    this.t = this.title; 
     this.title = ""; 
     var c = (this.t != "") ? "<br/>" + this.t : ""; 


     $("body").append("<p id='screenshot'>"+url+"</p>");         
     $("#screenshot") 
     .css("top",(e.pageY - xOffset) + "px") 
     .css("left",(e.pageX + yOffset) + "px") 
     .fadeIn("fast");       
     }, 
     function(){ 
     this.title = this.t;  
     $("#screenshot").remove(); 
     }); 

    $('#ctl00_m_g_615c4803_912c_4ba4_8415_8082f2df612c_ctl00_resultsGrid tbody tr').mousemove(function(e){ 
    $("#screenshot") 
     .css("top",(e.pageY - xOffset) + "px") 
     .css("left",(e.pageX + yOffset) + "px"); 
    });    
    };  


    $(document).ready(function() { 
screenshotPreview();  
});