Jquery ajax and qtip dynamic content

Question

I have a jquery ajax call and I need to get the results into a qtip. My Ajax call (to umbraco base)

jQuery("div.videoCardBack").mouseover(function (e) {
        var getFormUrl = "/base/Popup/GetSessionPopup/" + this.id;
        $.ajax({ url: getFormUrl, success: function (data) {
        var result = eval("(" + data + ")");
        $("#test").html("<div  class=\""  + result[0].SessionVideoImageUrl + "\" style=\"width:125px;height:83px;background:url(\'xxxx.png\');margin:8px;\">&nbsp;</div>" + result[0].SessionTitle + ' ' + result[0].SessionCode + ' ' + result[0].SessionDateTime + result[0].SessionAbstract);
        var o = { left: e.pageX - 180, top: e.pageY - 80 };
        $("#test").show(2000).offset(o);      
        }
        });
        });

The qtip
$('#verttabpanel a[rel]').each(function()
   { 
      $(this).qtip(
      {
         content: {
            text: '<center><img class="throbber" src="/images/animatednuts40.gif" alt="Loading..." /></center>',
            url: $(this).attr('rel'),
            title: {
               text: 'TechReadyTV2 - ' + $(this).attr('alt'),
            }
         },
         position: {
            corner: {
               target: 'bottomMiddle',
               tooltip: 'topMiddle'
            },
            adjust: {
               screen: true
            }
         },
         show: { 
       delay: 900,
            when: 'mouseover', 
            solo: true
         },
         hide: 'mouseout',
         style: {
            tip: true,
            border: {
               width: 0,
               radius: 4
            },
            name: 'dark',
            width: 570
         }
      })
   });

});

Answer 1

Here is what I've done to add qTip to every new image element I dynamically create.

I've put this on page header.

function call_qtip(element){
    $(element).qtip({
        content: {
            text: function(api) {
                return $(this).attr('qtip-content');
            }
        },
        position: {
            my: 'top left',
            at: 'bottom center',
            adjust: {
                y: 5
            }
        },
        style: {
            classes: 'ui-tooltip-tipsy'
        },
        show: {
            when: {
                event: 'focus'
            },
            effect: function() {
                $(this).fadeIn(500);
            }
        }
    });
}
call_qtip('.tooltipped');

And now every element with tooltipped class in the page will be converted to qTip.

Finally, I run the following code every time new element creates.

call_qtip('#file_upload_uploaded img:last');

Hope this helps to someone reading this question!

Answer 2

Depending on which instance of the qtip you want to populate with your data you can do the following:

jQuery("div.videoCardBack").mouseover(function (e) {
        var getFormUrl = "/base/Popup/GetSessionPopup/" + this.id;
        $.ajax({ url: getFormUrl, 
                 success: function (data) {
                     var result = eval("(" + data + ")");
                     $("#test").html("<div  class=\""  + result[0].SessionVideoImageUrl + "\" style=\"width:125px;height:83px;background:url(\'xxxx.png\');margin:8px;\">&nbsp;</div>" + result[0].SessionTitle + ' ' + result[0].SessionCode + ' ' + result[0].SessionDateTime + result[0].SessionAbstract);
                      var o = { left: e.pageX - 180, top: e.pageY - 80 };
                      $("#test").show(2000).offset(o);      

                      var qtipAPI = $('#verttabpanel a[rel]').qtip("api");
                      qtipAPI.updateContent($("#test").html());
                  }
              });
          });

var qtipAPI = $('#verttabpanel a[rel]').qtip("api"); will grab a reference to qtip api of the instance you initially bound it to. Once you have an api reference you can call the updateContent function to update the main body of the qtip with whatever content you want.