将工具提示/弹出窗口添加到数据表中的单元格

Question

我正在使用一个HTML文件，其中我的数据包含表结构。我正在利用Datatables提供的精美样式，但是我只有一个问题。我想将工具提示/弹出窗口添加到Datatable列（在本例中为第7列）的丢失单元格中。

在检查元素时，丢失的单元格将像这样包裹起来：

除了我的JS代码外，我还尝试了以下方法：

columnDefs: [{ 
    targets: 6,
    createdCell: function(td, cellData) {
        if (cellData === '') {
            $(td).tooltip({ trigger: 'hover', 
                            title: 'The cell is empty because ...'
                            })
            }
        }
    }],

不幸的是，这不起作用。

如果您需要查看，这是我完整的JS代码：

<script> 

$(document).ready(function() {
    $(".se-pre-con").fadeOut("slow");


           $('table thead tr').clone(true).appendTo( 'table thead' );
           $('thead tr:eq(1) th').each( function (i) {
               if(i > 4){
                   $(this).hide()
               }
           })

           $('table').DataTable( {

                fixedHeader: true,

                columnDefs: [{ 
                    targets: 6,
                    createdCell: function(td, cellData) {
                        if (cellData === '') {
                            $(td).tooltip({ trigger: 'hover', 
                                            title: 'The cell is empty because ...'
                                            })
                            }
                        }
                    }],

                language: {
                    processing:     "Bitte warten ..",
                    search:         "Suchen",
                    lengthMenu:    "_MENU_ Einträge anzeigen",              
                    info:           "_START_ bis _END_ von _TOTAL_ Einträgen",
                    infoEmpty:      "Keine Daten vorhanden",
                    infoFiltered:   "(gefiltert von _MAX_ Einträgen)",
                    infoPostFix:    "",
                    loadingRecords: "Wird geladen ..",
                    zeroRecords:    "Keine Einträge vorhanden",
                    paginate: {
                        first:      "Erste",
                        previous:   "Zurück",
                        next:       "Nächste",
                        last:       "Letzte"}
                    },

                   initComplete: function () {

                       this.api().columns().every( function () {

                           var column = this;

                           console.log(column.index())
                           var select = $('<select><option value=""></option></select>')
                               .appendTo( $(column.header()).empty() )
                               .on( 'change', function () {
                                   var val = $.fn.dataTable.util.escapeRegex(
                                       $(this).val()
                                   );

                                   column
                                       .search( val ? '^'+val+'$' : '', true, false )
                                       .draw();
                               } );

                           column.data().unique().sort().each( function ( d, j ) {
                               select.append( '<option value="'+d+'">'+d+'</option>' )
                           } );
                       } );


                   }

               } );

       } );

</script>