Dojo - destroying tooltip widget when DOM node is destroyed

Question

I use dijit/tooltips on a page that has a lot of domConstuct.destroy() and domConstuct.place() going on. So each time I remove some nodes from the DOM, I want to remove tooltips attached to those nodes. Currently the number of tooltip widgets is constantly growing on my page.

Is there a way to automatically remove a widget when corresponding DOM node is removed, or to check if existing tooltip widget's connect DOM node still exists?

Answer 1

You can attach a single Tooltip widget to multiple nodes at once, this may be the solution for you as you don't have to "manage" your tooltips anymore then. There's only one tooltip widget created for all tooltips, so you don't have to destroy it anymore.

The best way to achieve this is by using the selector property as described in the reference guide.

new Tooltip({
    connectId: "myTable",
    selector: "tr",
    getContent: function(matchedNode){
        return matchedNode.getAttribute("tooltipText");
    }
});

If they don't have a common connectId and/or selector, then you can still use a single tooltip by adding the target to the same tooltip instance by using the addTarget() function.

To remove a target you can also use removeTarget() which accepts a DOM node (so you just pass the DOM node you want to remove).

---

If neither of these solutions is able to help you I'd like to know how you instantiate your tooltips, there are multiple ways to do that. For example by using connectId or by creating an ad hoc tooltip using the show() function.

Answer 2

I found a solution to my problem with a help of Dimitri's answer. I don't create separate Tooltip widget for each tooltip any more, now I put all the tooltips in one Tooltip using it's .addTarget() method. The second part of the solution is iterating through Tooltip's connectId property and checking if the DOM node still exists. I had to do it using Javascript native methods .contains() and .getElementById(), because Dojo's dom.byId() and query() gave me false positives. So, my code now looks like this:

// creating Tooltip
var tooltips = new Tooltip({
    getContent: function(matchedNode){
        return matchedNode.getAttribute("tooltiptext");
    }
});

// adding tooltips
tooltips.addTarget(nameNode);

// deleting sufficient connects
for(var i = tooltips.connectId.length -1; i >= 0 ; i--){
    if(!document.contains(tooltips.connectId[i]) && !document.getElementById(tooltips.connectId[i])){
        tooltips.removeTarget(tooltips.connectId[i]);
    }
}

The reason I had to use both .contains() and .getElementById() is that some of the nodes I attached tooltips to have ids and some don't, and Tooltip widget stores some of them as strings (id) and some as DOM nodes.