Можете ли да дефинирате подсказки в шаблона на Dojo wijit?

Опитвам се да накарам Dojo (1.6) dijit.Tooltip да работи, когато е дефинирано в шаблон на wijit.

Така че, ако имам шаблон на wijit, който включва следното:

<a data-dojo-attach-point="tooltipMe" href="/bg" 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.

Възможно ли е да се дефинират вградени подсказки по този начин? Или просто правя нещо нередно, изглежда очевидното място да го направя.

Ако не, има ли приет подход за създаване и свързване на подсказки към DOM възли, дефинирани в шаблони на wijit?


tooltip dojo wijit
person brabster    schedule 01.05.2012    source източник

Отговори (4)


arrow_upward
4
arrow_downward

Подсказки Свойството connectId трябва да бъде идентификаторът на DOM възел. data-dojo-attach-point не е id, той просто създава препратка в инстанцираната джаджа.

Така че във вашия случай трябва да присвоите идентификатор на a-възел и да използвате същия идентификатор в connectId. За да избегнете сблъсъци на идентификатори, когато създавате множество екземпляри на вашата джаджа, можете да използвате заместването на променлива ${id}, за да гарантирате, че всички идентификатори са уникални:

Вашият код трябва да изглежда така:

<a id="${id}_link" data-dojo-attach-point="tooltipMe" href="/bg" 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>
person Fredde-Fisk    schedule 15.06.2012

arrow_upward
1
arrow_downward

И преди съм имал проблеми да го правя по този начин. Използвах скрипт, за да ги създам на моята страница, след като свърших друга работа, може би нещо подобно ще ви помогне, ако го използвате в метода postCreate на шаблона.

var span = dojo.query('.hasEntry span').forEach(function(node, index, nodelist)
{
        new dijit.Tooltip({
           connectId:node,
           position:"above",
           label: toolTipLabel
        });
});
person Simon McLoughlin    schedule 01.05.2012
comment
Благодаря, малка вариация на този подход работи достатъчно добре и поне всичко остава в дефиницията на wijit. Ще видя дали ще се появят други мнения, преди да приема отговора, но имайте поне +1! - person brabster; 01.05.2012

arrow_upward
1
arrow_downward

Отговарям на стара тема тук, но просто исках да споделя решение за хора, които искат да използват подсказки без идентификатори в своите персонализирани елементи на джаджи. Не е толкова красиво, колкото просто да използвате подсказка, но работи. Той използва модулите "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
    });
}));
person Bal    schedule 19.04.2014

arrow_upward
0
arrow_downward

Опитах се да копирам проблема в 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
}

Така че можете да инстантизирате подсказки чрез маркиране на шаблон и след това просто да се свържете към DOM възли в метода postCreate.

person phusick    schedule 01.05.2012