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!
Advertisement
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.
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.