Как создать всплывающую подсказку, используя qTip2, которая назначается во время выполнения для элементов страницы

Question

Я пытаюсь создать пузырь qTip2, который не отображается во время загрузки. Затем отобразите его под любым нажатием на изображение.

Посоветуйте, пожалуйста, как лучше всего это сделать. (используя qTip, чтобы решить пузырь, выходящий из экрана).

Спасибо

EDIT:

см. Проблему с http://jsfiddle.net/jnbPP/5/ (ищите правильный способ сделать это)

Answer 1

Ну тогда вам нужно загрузить его по клику, например:

$('img[title]').live('click', function(event) {
        $(this).qtip({
              overwrite: false,
              content: {           
                 text: $(this).attr('title') ,
              },
              position: {
                  my: 'top center', 
                  at: 'bottom center', 
                  adjust : {
                    screen : true
                  }
              },  
              show: {
                 event: event.type,
                 ready: true,
                 solo: true
              },
              hide: 'unfocus',
                style: {
                    classes: 'ui-tooltip-light'
              }
           });
    });

Проверьте мою скрипку: ПРИМЕР

Использование

adjust : {
     screen : true
}

, чтобы держать подсказку на экране.

Вот, пожалуйста, . ЩЕЛЧОК

$('img[title]').live('click', function(event) {
    var content = $('#settings').clone();
    $('input', content).val( $(this).width() );

    $(this).qtip({
      overwrite: false,
      content: {           
            text: content,
            title: {
                text: ' ',
               button: true
            }
         },
         position: {
             my: 'top center',  // Position my top left...
             at: 'bottom center', // at the bottom right of...
             viewport: $(window)
          },

      show: {
         event: event.type,
         ready: true,
         solo: true
      },
      hide: 'unfocus',
         style: {
               classes: 'ui-tooltip-ajax ui-tooltip-light'
         }
   });
});