Question

在wijit模板中定义时，我一直试图让Dojo（1.6）dijit.Tooltip工作。

所以，如果我有包含以下内容的wijit模板：

<a data-dojo-attach-point="tooltipMe" href="" onclick="return false;">
  Show a Tooltip
</a>
<div data-dojo-type="dijit.Tooltip" data-dojo-props="connectId:'tooltipMe'">
  Got to love hovering over links. Sometimes you a get a free tooltip
</div>

我当然可以看到链接，但是当我悬停时没有任何反应。围绕新闻组进行侦察似乎在wijit模板中定义工具提示可能存在问题，但在Dojo文档中没有提及。

是否可以像这样定义内联工具提示？或者我只是做错了什么，这似乎是显而易见的地方。

如果没有，是否有一种可接受的方法来创建工具提示并将其链接到wijit模板中定义的DOM节点？

Answer 1

工具提示connectId属性必须是DOM节点的id。 data-dojo-attach-point不是id，它只是在实例化的widget中创建一个引用。

因此，在您的情况下，您需要为a节点分配一个id，并在connectId中使用相同的id。为了避免在创建窗口小部件的多个实例时发生ID冲突，您可以使用$ {id}变量替换来确保所有ID都是唯一的：

您的代码应如下所示：

<a id="${id}_link" data-dojo-attach-point="tooltipMe" href="" onclick="return false;">
  Show a Tooltip
</a>
<div data-dojo-type="dijit.Tooltip" data-dojo-props="connectId:'${id}_link'">
  Got to love hovering over links. Sometimes you a get a free tooltip
</div>

Answer 2

我之前遇到过这样的问题。在我完成其他工作之后，我使用脚本在我的页面上创建它们，如果你在模板postCreate方法中使用它，这样的东西可以帮助你。

var span = dojo.query('.hasEntry span').forEach(function(node, index, nodelist)
{
        new dijit.Tooltip({
           connectId:node,
           position:"above",
           label: toolTipLabel
        });
});

Answer 3

在这里回复一个旧线程，但只是想为那些希望在自定义小部件元素上使用没有ID的工具提示的人共享解决方案。它不像使用工具提示那么漂亮，但它有效。它使用“dijit / popup”和“dijit / TooltipDialog”模块。

this.editTooltipDialog = new TooltipDialog({
    content: "<p>I love tooltips</p>",
    onMouseLeave: function(){
        popup.close(this.editTooltipDialog);
    }
});

on(this.targetDiv, 'mouseover', lang.hitch(this, function(){
    popup.open({
        popup: this.editTooltipDialog,
        around: this.targetDiv
    });
}));

Answer 4

我试图在jsFiddle中复制这个问题：http://jsfiddle.net/phusick/EcLLb/。

我发现模板中的dijit.Tooltip窗口小部件已实例化，但它没有连接鼠标事件，可能是因为它尝试连接的DOM节点尚未存在（即尚未添加到文档DOM树中））。

为了证明上述内容，我试图在widget的postCreate方法中连接工具提示，当所有DOM构建完成并且它有效时：

postCreate: function() {
    this.inherited(arguments);
    this.tooltip1.set("connectId", this.tooltipMe); // w/o this the tooltip won't show
}

因此，您可以通过模板标记实例化工具提示，然后在postCreate方法中连接到DOM节点。

你能在Dojo wijit模板中定义工具提示吗？

4 个答案: