qTip позиционирование во всплывающей подсказке - PullRequest
Новая
       2

qTip позиционирование во всплывающей подсказке

0 голосов
/ 17 января 2012

Итак, я успешно работал 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]

1 Ответ

0 голосов
/ 17 января 2012

У меня была похожая проблема. Я считаю, что это потому, что ссылки видны при загрузке, поэтому qTip убирает позицию с экрана. Я бы применил qTip к новым ссылкам после загрузки содержимого ajax.

Edit:

Попробуйте добавить qTip к событию show первого qTip: 

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