将单个Dojo Tooltip动态分配给多个节点

问题描述

想象一下，我们有一个包含节点列表的窗口小部件（例如div）。我们希望在鼠标悬停上显示Dojo Tooltip。内部的元素是动态生成的，所以我们必须以编程方式添加工具提示。

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.

策略是首先定义 Tooltip postCreate 中的单次时间，然后将其传递给处理程序功能，将动态添加到节点。

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);
  });
}

什么是正确的动态方式将 Tooltip 分配给mouseover'ed元素

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
}

推荐答案

你可以为工具提示做这样的事情
记住，你需要在你的窗口小部件定义中需要 dojo / query 。

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);
     }
  });

}

这篇关于将单个Dojo Tooltip动态分配给多个节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！