Question

我试图找到一种方法，只有当我的鼠标悬停在card_name列上时才添加工具提示。我设法将我的工具提示添加到数据表中，这个工具提示基本上是一个图像工具提示，但它被添加到整个行中。

$(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

因为您使用它来匹配ROW：

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

只需更改以匹配COL并使用简化的代码即可：

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

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

1 个答案: