Ограничить qtip2 внутри контейнера

Question

Как сохранить все qtips внутри контейнера (я уже пробовал position.container, position.viewport и position.adjust.method) без каких-либо удачи, моя догадка, что я их не правильно использовать.

Update: 1 Я создал пример приложения с более подробной информации о ниже URL http://secure.chiwater.com/CodeSample/Home/Qtip

Update: 2 Я создал jsfiddle ссылку тоже. http://jsfiddle.net/Lde45mmv/2/

Пожалуйста, обратитесь к приведенному ниже снимку экрана для деталей макета.

Я вызываю область, показанную между двумя строками в виде $ container в моем js-коде.

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

Ниже представлен код javascript, который создает qtip2.

//Now create tooltip for each of this Comment number 
     $('#cn_' + num).qtip({ 
      id: contentElementID, 
      content: { 
       text: ..... 
        var $control = $('<div class="qtip-parent">' + 
            ' <div class="qtip-comment-contents">......</div>' + 
            ' <div class="clearfix"></div>' + 
            ' <div class="qtip-footer"><span class="qtip-commenter">...</span><span class="pull-right"><a href="#' class="nounderline">...</a></span></div>' + 
            '</div>' 
            ); 

        return $control; 
       }, 
       button: false 
      }, 
      show: 'click', 
      hide: { 
       fixed: true, 
       event: 'unfocus' 
      }, 
      position: { 
       my: 'top right', 
       at: 'bottom right', 
       target: $('#cn_' + num), 
       container: $container, 
       //viewport: true, 
       adjust: { method: 'shift none' } 
      }, 
      style: { 
       tip: { 
        corner: true, 
        mimic: 'center',      
        width: 12, 
        height: 12, 
        border: true, // Detect border from tooltip style 
        //offset: 25 
       }, 
       classes: 'qtip-comment' 
      }, 
      events: { 
       show: function (event, api) { 
        ... 
       }, 
       hide: function (event, api) { 
        ... 
       } 
      } 
     }); 

Пример jalopnik страницы, которая показывает, что я ищу (FWIW Jalopnik пример не использует qtip2).

Answer 1

Я не думаю, что API qtip поддерживает эту функциональность. Я закончил переориентацию всплывающей подсказки на видимом событии.

Я обновил demo page и jsfiddle Ниже приведен код для этого.

events: { 
    visible: function (event, api) { 
     var $qtipControl = $(event.target); 
     $qtipControl.css({ 'left': contentPosition.left + "px" }); 
     var $qtipTipControl = $qtipControl.find(".qtip-tip"); 
     var $target = api.get("position.target"); 
     $qtipTipControl.css({ "right": 'auto' }); 
     //I am using jquery.ui position 
     $qtipTipControl.position({ 
      my: "center top", 
      at: "center bottom", 
      of: $target 
     }); 
    } 
} 

Проблема с этим подходом заключается в том, что при перепозиционировании qTip наблюдается заметный скачок. Но пока у меня нет другого выбора, я соглашусь с этим.

Идеальный подход состоит в том, чтобы разрешить метод обратного вызова до position.adjust, в настоящее время он поддерживает только статические значения для x и y, если метод был разрешен здесь, это сделало бы вещи более гладкими.