0

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

因此，如果我有包含以下内容的 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 节点？

4

4 回答 4

4

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

因此，在您的情况下，您需要为 a-node 分配一个 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>
于 2012-06-15T06:44:04.770 回答
1

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

var span = dojo.query('.hasEntry span').forEach(function(node, index, nodelist)
{
        new dijit.Tooltip({
           connectId:node,
           position:"above",
           label: toolTipLabel
        });
});
于 2012-05-01T10:41:42.943 回答
1

在这里回复一个旧线程，但只是想为希望在自定义小部件元素上使用没有 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
    });
}));
于 2014-04-19T14:43:09.910 回答
0

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

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

为了证明上述我尝试在小部件的postCreate方法中连接工具提示，当所有 DOM 构建完成并且它工作时：

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

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

于 2012-05-01T12:44:16.287 回答