5

ツールチップが必要な要素を動的に作成するページがあります。

私はいくつかの異なるアプローチを試しましたが、役に立たない答えをオンラインで探しました。

今のところ、私はこれを持っています：

var $links = $('a.link');
var len = $links.length;
for(var i = 0; i < len; i++){
    var $ele = $($links[i]);
    $ele.qtip({
        id: 'editLink',
        overwrite: false,
        content: {
            text: $linkEditor,
            title: {
                text: 'Edit Link',
                button: true
            }
        },
        position: {
            my: 'top center',
            at: 'bottom center',
            viewport: $(window)
        },
        show: {
            event: 'mouseover',
            solo: true
        },
        hide: false,
        style: {classes: 'ui-tooltip-shadow ui-tooltip-red'}
    });
}

私が探しているのは、これらすべての要素でまったく同じツールチップを使用する方法です。それらすべてがまったく同じコンテンツ (この場合は単一のフォーム) を使用し、まったく同じ方法で (id 'ui-tooltip-editLink' の tooltip 要素によって) ツールヒントを参照するようにします。

私が持っているものでは、現在最初のツールチップを正しく作成していますが、新しい要素を追加してツールチップを再割り当てすると、新しい要素に別の ID を持つまったく新しいツールチップが作成されます。

複数の要素、同じツールチップのアプローチを達成する方法を知っている人はいますか?

4

5 に答える 5

1

誰かが便利だと思ったら、1 つのツールチップ div を多くのツールチップ イメージで共有する方法を見つけました。

 $(".tooltipBearing").qtip({
                            content: {  
                                text: $("#tooltipDiv").html()
                            }          
                      });

そこに.html()を配置できなかった場合、共有ツールチップが一度表示され、別のイメージからアクティブ化すると、最初のイメージでは機能しなくなります...

tooltipBearingは、ページ内の一部の画像に設定されたクラスです。

tooltipDivは、ツールチップ コンテンツを含む div の ID です。

于 2013-08-13T20:10:15.127 に答える
0

動的に作成された要素で使用するには、要素の初期化中qtipに含める必要がありqtipます。

例えば

$('<div style="top:0px; left:0px; position:absolute;">abc123</div>').appendTo("body").qtip({content: "test"});
于 2012-04-26T08:07:56.157 に答える
0

残念ながら、ホバー/クリック要素ごとに Tooltip 要素を複製する必要があるようです。

Craig は GitHub の問題でこれについて言及しています: https://github.com/Craga89/qTip2/issues/173

于 2013-05-22T15:08:51.217 に答える
0

user738048 の回答に基づいて、私の実用的なソリューションは次のようになります。

$('[data-tooltipid]').each(function() {
    var ttid = $(this).data('tooltipid');
    $(this).qtip({
        content: {
            text: $('#'+ttid).html(),
        },
        position: {
            my: 'top left',
            at: 'bottom left',
            target: $(this)
        }
    }).removeAttr('href').removeAttr('onclick');
});

私の場合、テキストを含む HTML 要素の ID はdata-tooltipid属性から取得されます。myhrefおよびonclick属性は、ツールチップによって廃止されたため削除されました。

于 2015-05-07T08:13:25.470 に答える