jquery - 実行時にページ要素に割り当てられる qTip2 を使用してツールチップを作成する方法

Question

qTip2 バブルを作成しようとしていますが、読み込み時に表示されません。次に、クリックした画像の下に表示します。

これを行う最善の方法を教えてください。（qTipを使用して、画面から出るバブルを解決します）。

ありがとう

編集：

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'
         }
   });
});