您可以在Dojo wijit模板中定義工具提示嗎？

我一直試圖讓一個Dojo（1.6）dijit.Tooltip在wijit模板中定義時工作。您可以在Dojo wijit模板中定義工具提示嗎？

所以，如果我已經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節點？

來源

2012-05-01 Brabster

我以前曾這樣做過問題。在我完成了一些其他工作後，我使用腳本在我的頁面上創建了它們，如果您在模板postCreate方法中使用它，也許這樣會幫助您。

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

來源

2012-05-01 10:41:42

謝謝，這種方法稍有變化就可以工作，至少它全部停留在wijit定義中。我會在接受答案之前看看是否有其他觀點出現，但至少有+1！ – Brabster

沒有問題，很高興它幫助 –

我試圖在jsFiddle中複製問題：http://jsfiddle.net/phusick/EcLLb/。

我發現模板中的dijit.Tooltip小部件是實例化的，但它不會連接鼠標事件，大概是因爲它嘗試連接的DOM節點尚不存在（即尚未添加到文檔DOM樹中）。

爲了證明上述我想，當所有DOM建設完成連接在widget的postCreate方法，工具提示和它的工作：

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

所以，你可以通過一個模板標記instantize提示，然後只需連接，然後到postCreate方法中的DOM節點。

來源

2012-05-01 12:44:16 phusick

工具提示connectId屬性必須是DOM節點的ID。 data-dojo-attach-point不是一個id，它只是在實例化的小部件中創建一個引用。

所以在你的情況下，你需要給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>

來源

2012-06-15 06:44:04

+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-19 14:43:09 Bal

您可以在Dojo wijit模板中定義工具提示嗎？

回答

相關問題