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

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.