Dynamically assign single Dojo Tooltip to multiple Nodes

Question

Imagine that we have a widget with a list of nodes (e.g. divs). We would like to display a Dojo Tooltip on mouseover. The elements inside are generated dynamically, so we have to add Tooltips programmatically.

The strategy is to first define the Tooltip single time during postCreate and then pass it to handler-function which will dynamically add it to the nodes.

postCreate: function() {
  var _this = this;
  var fooTooltip = new Tooltip();

  this.own(on(this, '.elements-container-item', function(e) {
    lang.hitch(_this, 'onMouseOverHandler')(this, e, fooTooltip);
  });
}

What is the proper way to dynamically assign Tooltip to mouseover'ed element?

onMouseOverHandler: function(node, e, fooTooltip) {
  fooTooltip.set('connectId', [node]); // doesn't work
  fooTooltip.set('label', 'foo label'); // doesn't work as well
}

Answer 1

You could do something like this for the tooltip. Remember you need to require dojo/query in your widget definition.

postCreate: function() {
  var _this = this;
  var containerNode = this.domNode; // Assuming that the widget has a domNode

  var fooTooltip = new Tooltip({
     connectId: query('.list-container', containerNode ), // Search the Node starting at the containerNode.
     selector: '.list-container-item',
     getContent: function(matchedNode) {
        console.debug('this is a tooltip for ', matchedNode);
     }
  });

}