Question

我有下表，我需要根据独特的员工ID显示人物照片的工具提示：

以下代码适用于显示正确的网址如何使工具提示显示网址的img，而不仅仅是网址的文本。

代码如下：

$('#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 /＆gt ;;

Answer 1

仅标题属性不允许这样做。

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

检查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();    
 });

数据表工具提示图像

2 个答案: