Question

I have a web application in which you view/explore a 2D network graph.
when you mouseover a node, a request is sent to the server – the server gathers information and sends it back to the client – the client saves all informations in a JS class TooltipGraphListener like this:

var w = new scripts.widget.GraphInfo({ 
    baseURL: this._baseURL, 
    basePath: 'graphs/' + this._graphName, 
    path: 'nodes/' + nid, 
    tooltip: true });

var domNode = w.domNode;
dojo.removeClass(domNode, 'graphInfo');
domNode.setAttribute("id", nid);
this._canvas.containerNode.appendChild(domNode);
dojo.addClass(domNode, 'tooltip');
dojo.style(domNode,  "opacity", 0.8);
this._toolTips.push(w);

my problem now is that if I generate a new graph in the web app’s widget this line:

var tooltip = dojo.byId(id);
if (tooltip)...

still is true, even if I clear _toolTips (_toolTips = []) or re-initialize the whole class (listener = new TooltipGraphListener()).. the individual tooltips can still be found by dojo.byId(id);

how can I reset/delete all these tooltip domnodes?

Answer 1

When you clear your tooltips, you’ll also have to remove their DOM nodes from the document (I’m sure there’s a more dojo way of doing this, but I haven’t used that framework):

for (var i = 0; i < this._tooltips.length; i++) {
    this._canvas.containerNode.removeChild(this._tooltips[i].domNode);
}
this._tooltips = [];