How to create a tooltip using qTip2 that is assigned at runtime to page elements

Question

I am trying to create a qTip2 bubble but not display at boot time. Then display it under any click of the image.

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

thank

EDIT:

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

Answer 1

Well, then you need to download it by click, for example:

$('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 script: EXAMPLE

Using

adjust : {
     screen : true
}

to save the tooltip on the 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'
         }
   });
});