How do i create a tooltip using qTip2 that is assigned at run time to page elements

I'm trying to have a qTip2 bubble created but not displayed at load time. Then display it under any image clicked.

Please advise what is the best way to do this. (using qTip to solve the bubble going out of the screen).

Thanks

开发者_高级运维EDIT:

see problem with http://jsfiddle.net/jnbPP/5/ (looking for the correct way to do this)

---

Well then you need to load it on click, e.g.:

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

Check out my fiddle: EXAMPLE

Use

adjust : {
     screen : true
}

to keep the tooltip on screen.

Here you go. CLICK

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