Attaching bootstrap tooltip to an image in a td when the datatable is displayed in a bootstrap modal

Sorin

Hi.

I have the following situation:
- in a bootstrap modal I displayed a dataTable that is loaded from a RESTFUL service. The data is in JSON format. On the last column, depending on the data (true or false) from service, i want to display an font-awesome icon. On that icon I want to use the bootstrap tooltip to show the user a text ("Alive" or "Dead").

The problem is as follows:
- the table is displayed correctly, the icon appears, but when I attach the tooltip, if I hover the cursor over the icon, then the rows from the table flickers and disappear and in the firebug console I see that the ajax get that loads the table is called repeatedly. In that situation the dataTable loads data from backend endlessly and he doesn't have time to display anything.
In another part of the project I have another instance of dataTable displayed, and there the bootstrap tooltip is displayed correctly. The only difference is that dataTable is displayed in body, not bootstrap modal. Somehow, I think that the modal has a connection with this problem.

Adittional information:
- dataTable version: 1.9.4
- bootstrap version 2.3.2

Please help me display correctly the bootstrap tooltip in dataTable.

The code I used is as follows:

HTML CODE for the bootstrap modal window
[code]
Launch agent status


×
Agents status









Close


[/code]

Javascript code for displaying the modal with datatable
[code]
$("#agentStatusBtn").on("click", function(){
$("#showAgentsStatusModal").modal("show");
});

$("#showAgentsStatusModal").on("shown", function(){
AgentsStatusManager.init();
});

var AgentsStatusManager = {
modalIsLoaded: false,
tableUrl: "restfull service url",
target: $("#agentsStatusTableContainer"),
tableRef: "",
tableContainerHeightParam: null,
init: function(){
var that = this;

$(window)
.off("resize.agentsStatus")
.on("resize.agentsStatus", function() {
that.centerModalOnScreen();
that.calculateColumnHeights();
});

if (!this.modalIsLoaded) {
this.centerModalOnScreen();
this.calculateColumnHeights();

this.modalIsLoaded = true;
}

this.render();
},

centerModalOnScreen: function(){
var modal = $("#showAgentsStatusModal");
var modalWidth = modal.width();
var modalHeight = modal.height();

modal.css({
top: ($(window).height() - modalHeight) / 2 + "px",
left: ($(window).width() - modalWidth) / 2 + "px"
});
},

calculateColumnHeights: function(){
var agentsStatusModalHeight = $("#showAgentsStatusModal").height();
var agentsStatusModalHeaderHeight = $("#showAgentsStatusModal .modal-header").outerHeight(true);
var agentsStatusModalFooterHeight = $("#showAgentsStatusModal .modal-footer").outerHeight(true);

var columnHeight = agentsStatusModalHeight - agentsStatusModalHeaderHeight - agentsStatusModalFooterHeight;
this.target.height(columnHeight + "px");
this.tableContainerHeightParam = columnHeight;
},

options: {
"sDom": "t",
"bPaginate": false,
"sScrollY": "",
"sAjaxDataProp": "",
"bDestroy": true,
"oLanguage": {"sEmptyTable": "There are no records available."},
"fnInitComplete": function (oSettings, json) {
console.log("Agents status table was rendered");

$(".statusContainer").tooltip();
//$(".statusContainer", this.fnGetNodes()).tooltip();

},
"fnDrawCallback": function(){
//$(".statusContainer").tooltip();
//$(".statusContainer", this.fnGetNodes()).tooltip();
},
"aoColumns": []
},

generateColumns: function(){
var columns= [
{ bVisible: true, sWidth: 100, sTitle:"Agent name", "mData": "agent.agentName", sDefaultContent: ""},
{ bVisible: true, bSortable: false, sTitle:"IP", "mData": "agent.ip", sDefaultContent: ""},
{ bVisible: true, bSortable: false, sTitle:"Ping update", "mData": "agent.lastPingUpdate", sDefaultContent: ""},
{ bVisible: true, bSortable: false, sTitle:"Max memory", "mData": "agent.maxMemory", sDefaultContent: ""},
{ bVisible: true, bSortable: false, sTitle:"Total memory", "mData": "agent.totalMemory", sDefaultContent: ""},
{ bVisible: true, bSortable: false, sTitle:"Free memory", "mData": "agent.freeMemory", sDefaultContent: ""},
{ bVisible: true, bSortable: false, sTitle:"Status", "mData": "agent.isAlive", sClass: "statusAlignCenter", sDefaultContent: "",
mRender: function(mData){
if(mData){
//the agent is alive
return ""
} else{
//the agent is dead
return ""
}
}
}
];
this.options.aoColumns= columns;
},

render: function(){
var that=this;

this.empty();

//here I calculate the height of the table container from pluggin
this.options.sScrollY = this.tableContainerHeightParam - 40 + "px";

//here we load the table from the ajax source
this.options.sAjaxSource = this.tableUrl;

var agentsStatusDt = $('');

//if exists don't add multiple times
if ($("#agentsStatusDT", this.target).length <= 0) {
this.target.append(agentsStatusDt);
}

this.generateColumns();

//here we initialize the datatable plugin
this.tableRef = agentsStatusDt.dataTable(this.options);
},

reload: function () {
this.tableRef.fnClearTable();

this.tableRef.fnReloadAjax(function() {}, this.tableUrl);
},

empty: function() {
this.target.empty();
this.tableRef = null;
}
}
[/code]