0

dijit.TooltipWijit テンプレートで定義されている場合、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

ここで古いスレッドに対応しますが、カスタム ウィジェット要素で 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 に答える
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 に答える
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 に答える