jquery qtip ajax,Jquery ajax and qtip dynamic content

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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("

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: '

',

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

}

})

});

});

回答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("

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.

回答2:

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!