title: Add image/icon as a row value in datatables
body: <p>I need to add an image/icon to the last column in the row. And that icon should have a tooltip when I hover on it should display data from the server. I am not sure how to implement this. Any experts who has implemented this feature please help me. Thanks in advance.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>This is the sample data I have and I need to add an icon for the last column when hovered over displays a tooltip with the "data" in tooltip.</p>
  
  <pre><code>{
      "iTotalRecords": 5,
      "sEcho": "1",
      "aaData": [
          [
              "V2993ASFKH230943",
              "Honda",
              "Accord",
              "data"
          ],
          [
              "V2993A39SNF30943",
              "Honda",
              "CRV",
              "data"
          ],
          [
              "V4833A39SNF30943",
              "Acura",
              "TSX"
          ],
          [
              "V4833RE9SNF30943",
              "Acura",
              "TL",
              "data"
          ],
          [
              "V9383RE9SNF30943",
              "Acura",
              "MDX",
              "data"
          ]
      ],
      "iTotalDisplayRecords": 5
  }
  </code></pre>
  
  <p>[update]</p>
  
  <p>The image tag ends up looking like this:</p>
  
  <pre><code>var imgTag = '&lt;span class="mytext" &gt;&lt;span class="ui-icon ui-icon-wrench" &gt;&lt;/span&gt;';
  </code></pre>
  
  <p>A requirement is also to have modal dialog appear on hover. Below is the jquery code to open the modal.</p>
  
  <pre><code>$(".mytext").mouseover(
              function() {
                  var width = 250;
                  var height = 270;
                  var posX = $(this).offset().left - $(document).scrollLeft()
                          - width + $(this).outerWidth();
                  var posY = $(this).offset().top - $(document).scrollTop()
                          + $(this).outerHeight();
                  //alert(posX + ", " +posY);
                  $(".mytext").dialog({
                      resizable:false,
                      width : width,
                      height : height,
                      position : [ posX, posY ]
                  });
              });
  </code></pre>
  
  <p>This is somehow not working, when I hover on it. Its not triggering the jquery Modal</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>You are correct there is a timing issue. I fixed that issue. Now when I hover on it is loading up all the images into the modal i.e., the number of rows I have are the number of modal dialogs that are opened. I need to pass the value aData[3] to the jquery modal.</p>