Bootstrap and ToolTips in Column Headers.

DEVLING

I'm trying to get Bootstrap tooltips to work with my table.

First - boostrap is initialized as follows:

$('[data-toggle="tooltip"]').tooltip({
        container: 'body'
    });

My code is functional so I'll post a snippet. Basically, my columns are dynamic and they are stored as an array like this:

headerArray.push(
                   { "mData": "SCHOOL_YEAR", "title": "School Year YEAH!", "bSearchable": false, "bSortable": false, sTitle: "School Year" },
                   { "mData": "COUNTY", "bSearchable": true, "bSortable": false, sTitle: "County" }, ..and so on..

Each line represents the properties of the column. The first column of the first array is SCHOOL_YEAR.

After initialization, the grid is populated with SCHOOL_YEAR being the matching string. What I'm struggling with is to get the tool tip to display "School Year Yeah" but it does not seem to be rendering at all.

Now in the data tables initialization I have the following code but nothing is working. Any tips?

 "initComplete": function(settings){
            
            $('#tableCounties thead th').each(function () {
                var $td = $(this);
                $td.attr('explain', $td.text());
            });

            $('#tableCounties thead th[explain]').tooltip({ "delay": 0, "track": true, "fade": 250 });
            
        }