Можете ли вы определить всплывающие подсказки в шаблоне Dojo 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.

Можно ли определить встроенные всплывающие подсказки, как это? Или я просто делаю что-то не так, это кажется очевидным местом для этого.

Если нет, существует ли общепринятый подход к созданию и связыванию всплывающих подсказок с узлами DOM, определенными в шаблонах виджета?


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

Ответы (4)


arrow_upward
4
arrow_downward

Свойство connectId всплывающих подсказок должно быть идентификатором узла DOM. data-dojo-attach-point не является идентификатором, он просто создает ссылку в экземпляре виджета.

Итак, в вашем случае вам нужно назначить идентификатор a-узлу и использовать тот же идентификатор в connectId. Чтобы избежать конфликтов идентификаторов при создании нескольких экземпляров вашего виджета, вы можете использовать подстановку переменной ${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>
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