0

そのため、qTip2 が正常に動作し、ツールチップが ajax コンテンツのモーダルとして表示されます。モーダル ツールチップ内のコンテンツに別のツールチップを呼び出すリンクがあることを除いて、すべてがうまく機能しています。それらのいずれかをクリックすると、位置が画面から外れます (-234.5px や -300px など)。

位置パラメーターと関係があることは知っていますが、機能させることができません。前にクリックしたツールチップのターゲットをその位置として使用することはできますか? または、同じツールチップに新しい ajax コンテンツをロードする方法はありますか?

メインページのリンク:

<a class="qtipajaxmodal" id="[id here]" href="[link here]" 
    rel="[ajax link here]">Main Link</a>

ajax プル コンテンツ内のリンク:

<a class="qtipajaxmodal" id="[id here]" href="[link here]" 
    rel="[ajax link to somewhere else here]">Another Link</a>

qヒントコード:

// Make sure to only match links to wikipedia with a rel tag
       $('a.qtipajaxmodal').live('mouseover', function() {
           // Make sure to only apply one tooltip per element!
            if( $(this).data('qtip') === 'object' ){ return; } 

          $(this).qtip({
            id: 'modal2', 
            content: {

            text: '<div class="ajaxqtipmodal-load" alt="Loading..."></div>',
                ajax: {
                   url: $(this).attr('rel') 
                },
                title: {
                   text: 'Title: - ' + $(this).text(), 
                   button: true
                }
             },
              events: {
                 show: function(event, api) {
                     // Grab the tooltip element from the API
                     var tooltip = api.elements.tooltip
                     // ...and here's the extra event binds
                     tooltip.find('.ui-tooltip-titlebar').show();
                  },
                  hide: function(event, api) { 
                    //api.destroy(); 
                  }
               },
             position: {
                 target: $('#main'),
                 container: $('#main'),
                 my: 'center', // ...at the center of the viewport
                 at: 'center',
                 //viewport: $('#container'),
                 effect: false
             },
             show: {
                event: 'click',
                solo: true, // Only show one tooltip at a time
                modal: true,
                effect: function(offset) {
                    $(this).show(400); // "this" refers to the tooltip
                } // ...and make it modal

             },
             hide: false,
             style: {
                classes: 'ui-tooltip-fd-movie'
             }
         }).click(function(event) { event.preventDefault(); });
       });[/code]
4

1 に答える 1

0

同様の問題がありました。リンクがロード時に表示されるため、qTip が位置を画面から外したためだと思います。ajax コンテンツがロードされた後、新しいリンクに qTip を適用します。

編集：

最初の qTip の show イベントに qTip を追加してみてください:

show: function(event, api) {
    $(".qtipajaxmodal").qTip(...);
}
于 2012-01-17T19:52:57.273 に答える