Bootstrap Tooltips Disappear Upon Sorting Table

I have included some Bootstrap tooltips (indicated by glyphicons) in my table (http://jsfiddle.net/mademoiselletse/bypbqboe/66/) by adding the following tag directly into my table cell:

<i class="glyphicon glyphicon-tags" data-toggle="tooltip" data-placement="right" data-title="this is a tooltip glyphicon"></i>

I initialize the tooltips by triggering tooltipExe () every time the table is loaded (line 56, 82, 109, 117), defined as follows:

function tooltipExe () {
$('[data-toggle="tooltip"]').tooltip()
};

While it works perfectly when the table is loaded, the Bootstrap tooltip effect within the table cells strangely disappear once I sort the table. I looked through the Bootstrap JS documentation and the forum but couldn’t find anything helpful. Does anyone know what might cause such disappearance? I would very much appreciate your help!

Answer

Yeah, Bootstrap must be doing something that breaks your tooltip binding. Run it on the sort callback:

$table.on('sort.bs.table', function () {
    tooltipExe();
});

Update: The sort event didn’t work, possibly since it fires at the beginning of the sort operation, so I went with all.bs.table. I see that an after-sort event has been requested.

Demo

Update again: I see from that Github thread that you could use the post-body.bs.table event to reduce the number of function calls.

Demo 2