javascript 如何将工具提示添加到表格标题

How to add tooltip to table header

提问by james Makinde

I'm using jQuery DataTables and I have been trying to add tooltips to the Header column of my datatables for the past 2 days to no avail.

我正在使用 jQuery DataTables，过去 2 天我一直在尝试将工具提示添加到我的数据表的 Header 列中，但无济于事。

I have used the example on the datatables website where tooltips were added to the row data, but that didn't work. I only see one tooltip, and it does not even get the title of the column.

我使用了数据表网站上的示例，其中向行数据添加了工具提示，但这不起作用。我只看到一个工具提示，它甚至没有得到列的标题。

Below is the code I have so far.

下面是我到目前为止的代码。

if (oTable != null) {
    oTable.fnClearTable();
    oTable.fnAddData(columnData);
} else {

    oTable = $('#caseDataTable').dataTable({
        "bDestroy": true,
        "aaData": columnData,
        "aoColumnDefs": columnNames,
        bFilter: true,
        bAutoWidth: true,
        autoWidth: true,
        "responsive": true,
        dom: 'Bfltip',
        buttons: [
            {
                extend: 'colvis',
                postfixButtons: ['colvisRestore'],
                collectionLayout: 'fixed two-column'
            }
        ],
        "fnDrawCallback": function() {
            if (typeof oTable != 'undefined') {
                $('.toggleCheckBox').bootstrapToggle({});
            }

            $('#caseDataTable thead tr').each(function () {
                var sTitle;
                var nTds = $('td', this);
                var columnTitle= $(nTds[0]).text();

                 this.setAttribute('title', columnTitle);
            });

            /* Apply the tooltips */
            $('#caseDataTable thead tr[title]').tooltip({
                "delay": 0,
                "track": true,
                "fade": 250
            });
        }
    });
}

回答by Gyrocode.com

CAUSE

原因

There are multiple issues with your code:

您的代码存在多个问题：

• You have incorrect CSS selectors, you should be targeting thelements and not tr.
• initCompleteis a proper place to do this since you only need to do it once.

• 您的 CSS 选择器不正确，您应该定位th元素而不是tr.
• initComplete是一个合适的地方，因为你只需要做一次。

DEMO

演示

My example below is for Bootstrap Tooltip. Adjust to your tooltip plugin accordingly.

我下面的示例适用于 Bootstrap 工具提示。相应地调整您的工具提示插件。

$(document).ready(function() {  
    var table = $('#example').DataTable( {     
        "ajax": 'https://api.myjson.com/bins/qgcu',
        "initComplete": function(settings){
            $('#example thead th').each(function () {
               var $td = $(this);
               $td.attr('title', $td.text());
            });

            /* Apply the tooltips */
            $('#example thead th[title]').tooltip(
            {
               "container": 'body'
            });          
        }  
    }); 
});

<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 

<table id="example" class="display">
<thead>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Salary</th>
        <th>Start Date</th>
    </tr>
</thead>

<tfoot>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Salary</th>
        <th>Start Date</th>      
    </tr>
</tfoot>
</table>

回答by rdgfuentes

I would try moving

我会试着搬家

            /* Apply the tooltips */
            $('#caseDataTable thead tr[title]').tooltip({
                 "delay": 0,
                 "track": true,
                 "fade": 250
            });

outside of the fnDrawCallback

在 fnDrawCallback 之外

if (oTable != null) {
                oTable.fnClearTable();
                oTable.fnAddData(columnData);
            } else {

                oTable = $('#caseDataTable').dataTable({
                    "bDestroy": true,
                    "aaData": columnData,
                    "aoColumnDefs": columnNames,
                    bFilter: true,
                    bAutoWidth: true,
                    autoWidth: true,
                    "responsive": true,
                    dom: 'Bfltip',
                    buttons: [
                        {
                            extend: 'colvis',
                            postfixButtons: ['colvisRestore'],
                            collectionLayout: 'fixed two-column'
                        }
                    ],
                    "fnDrawCallback": function() {
                        if (typeof oTable != 'undefined') {
                            $('.toggleCheckBox').bootstrapToggle({});
                        }

                        $('#caseDataTable thead tr').each(function () {
                            var sTitle;
                            var nTds = $('td', this);
                            var columnTitle= $(nTds[0]).text();

                             this.setAttribute('title', columnTitle);
                        });

                    }
                });

                /* Apply the tooltips */
                $('#caseDataTable thead tr[title]').tooltip({
                     "delay": 0,
                     "track": true,
                     "fade": 250
                });
            }