datatables infobulle image

Question

je le tableau suivant que je dois afficher une info-bulle de l'image des personnes en fonction de l'identifiant personnel unique:

Le code suivant fonctionne en ce qui concerne l'affichage de l'URL correcte comment puis-je faire l'info-bulle affiche l'img de l'URL au lieu que ce soit simplement le texte de l'URL.

Code

est comme suit:

$('#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);                    
       }); 
      }); 

l'info-bulle de sortie affiche uniquement le texte http: // portail: 8081/ColleaguePhotos/staffnumber/primary.jpg />;

Answer 1

L'attribut title seul ne le permettra pas.

Vous devez utiliser un plugin infobulle:

• vérifier le widget jquery-ui tooltip (demo with images here)
• ou qTip2

ou chercher d'autres les

Answer 2

Merci tout ce que j'ai utilisé les deux de vos suggestions et trouvé la solution:

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