Question

所以我让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>

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]

Answer 1

我有类似的问题。我相信这是因为链接在加载时是可见的，所以qTip将位置放在屏幕上。在加载ajax内容后，我会将qTip应用于新链接。

编辑：

尝试在第一个qTip的show事件中添加qTip：

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

q在工具提示中定位

1 个答案: