Datatables Tooltip Image

Question

I have the following table that I need to display a tooltip of the persons picture based on the unique staff id:

The following code works in regards to displaying the correct url how can I make the tooltip display the img of the url instead of it just being the text of the url.

code is as follows:

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

the output tooltip just displays the text http://portal:8081/ColleaguePhotos/staffnumber/primary.jpg/>;

Answer 1

Thanks all I have used both of your suggestions and found the 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();    
 });

Answer 2

The title attribute alone will not allow this.

You should use a tooltip plugin :

• check the jquery-ui tooltip widget (demo with images here)
• or qTip2

or look for other ones