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 回答