CODEWITHSUNDEEP
jqueryjquery-pluginsqtip2
montrealmike
montrealmike

Reputation: 11631

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)

Upvotes: 3

Views: 3062

Answers (1)

DarkLeafyGreen
DarkLeafyGreen

Reputation: 70406

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

Upvotes: 1

Related Questions