将工具提示添加到特定的数据表列

Question

I am trying to find a way in adding the tooltip only when my mouse hovers over the card_name column. I managed to add my tooltips into datatables and this tool tip basically is an image tool tip, but it is added to the entire row instead.

$(document).ready(function() {
  var otable = $('#example').dataTable( {
    "bProcessing": true,
    "bServerSide": false,
    "sAjaxSource": "getTrackerData.php",
    "aoColumns": [
      { "mDataProp": "card_name", },
      { "mDataProp": "card_id"},
      { "mDataProp": "card_series_id" },
      { "mDataProp": "card_type_track" },
      { "mDataProp": "track_url" },
      { "mDataProp": "track_status" },
      { "mDataProp": "card_img_url" }
    ],
    "fnDrawCallback": function(settings){
      $('#example tbody tr').each(function () {
        //var $td = $(this);
        //$td.attr('title', $td.text());
        var nTds = $('td', this);
        var sURL = $(nTds[6]).text();
        var t = "<img src='"+sURL+"' width='90' height='126'>"
        nTds.attr('title', t);
      });

      /* Apply the tooltips */
      $('#example tr').tooltip({
        "delay": 0,
        "track": true,
        "fade": 250,
        content: function (){
          return $(this).prop('title');
        }
      });  // end for tooltip

    }// end for fnDrawCallback  

  } ); // end of datatable

} );

Answer 1

Because you used it to match a ROW:

$('#example tr').tooltip({

Just change to match COLs and use a simplified code:

$('#example td[title]').tooltip();