Tooltips of headers of jqxGrid are never removed from DOM

[skiriParticipant]

We are working a lot with jqxGrids in a single page application. Some of the Grids provide tooltips to the column headers.
It is implemented over the rendered function:

example:
rendered: function(elem, par1, par2) {
renderGridHeader(elem, par1, par2, “HelloWorld”));
},
…
Implemented in this way:

let renderGridHeader = function(headerElem, alignment, height, tooltipTxt) {
if (typeof headerElem.css == “function”) {
headerElem.css(“font-weight”, “bold”);
if (tooltipTxt && tooltipTxt != “”) {
$(headerElem).jqxTooltip({position: “mouse”, content: tooltipTxt});
}
}
};

This is working in principle fine.
In the DOM there is also created a div node with the id=”jqxtootip(+ some internal id) class=”jqx-tooltip jqx-popup”… which is required for showing the tooltip popup.

My problem is, that these tooltips div in the DOM are never deleted. Whenever a new grid is created on the page (and old one removed from DOM), again and again the tooltips nodes are added to the DOM. If the session is running a long time, there could be hundreds of them. How to get rid of them?

I cannot call explicitly call $…jqxTooltip(“destroy”) before closing the grid, because I don’t know the selector id of the tooltip for the header. Any idea?

[adminKeymaster]

Hi skiri,

As far as I see, you create tooltips so you should destroy them when you want. The tooltips in this code are created by using Element selector so you can store the element’s ID in an array and when you need, loop through the array and call the jqxTooltip’s destroy method.

Best regards,
Peter stoev

jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts