2012-01-17 110 views
0

所以我有qTip2工作成功,顯示工具提示作爲一些ajax內容的模態。一切工作都很好,除了模態工具提示中的內容具有也稱爲另一個工具提示的鏈接。當我點擊其中的任何一個時,定位就會離開屏幕(如-234.5px和-300px)。qTip在工具提示中的位置

我知道它與位置參數有關,但我無法讓它工作。我可以使用之前點擊過的工具提示的目標作爲它的位置嗎?或者有沒有辦法在同一個工具提示中加載新的ajax內容?

主頁上鍊接:阿賈克斯內

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

鏈接拉取的內容:

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

qTip代碼:

// 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] 

回答

0

我也有類似的問題。我相信這是因爲這些鏈接在加載時是可見的,所以qTip將這個位置放在屏幕上。在加載ajax內容後,我會將qTip應用於新鏈接。

編輯:

試穿第一qTip的Show事件添加qTip:

show: function(event, api) { 
    $(".qtipajaxmodal").qTip(...); 
} 
+0

你的意思是鏈接不是在加載可見?新鏈接由第一個qtip的ajax調用生成。新內容加載後如何應用它?給它一個不同的課程?謝謝你的幫助! – chuuke 2012-01-17 20:07:01

+0

它與節目中的獨奏屬性有關。設置爲true時,與當前qTip的qtip鏈接無法正確計算位置。當獨奏關閉時,它似乎工作。每次我需要從qtip中取出一個qtip時,上面的編輯是否要求我嵌套一個show函數?有沒有辦法只將內容放入當前的qTip? – chuuke 2012-01-17 20:37:49