jquery - 数据表工具提示图像

Question

我有下表，我需要根据唯一的员工 ID 显示人员图片的工具提示：

以下代码适用于显示正确的 url 如何使工具提示显示 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://portal:8081/ColleaguePhotos/staffnumber/primary.jpg/>；

Answer 1

单独的 title 属性不允许这样做。

您应该使用工具提示插件：

• 检查jquery-ui 工具提示小部件（此处带有图像的演示）
• 或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();    
 });