Question

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)

Answer 1

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