I recently followed these instructions on utilizing jQueryUI tooltip to load content via ajax. (fiddle)(Full Screen). However, I encountered an issue where I'm unable to set a different position for the second tooltip (`.loadtip`) compared to the first one. Is there a way to override the position of the first tooltip?
Here is the code snippet:
$(document).tooltip({
items: "[data-info]",
position: {
my: "left+70 top",
at: "center top",
},
content: function () {
return $(this).data('info');
},
show: null,
close: function (event, ui) {
ui.tooltip.hover(
function () {
$(this).stop(true).fadeTo(400, 1);
},
function () {
$(this).fadeOut("150", function () {
$(this).remove();
})
});
}
});
$('.loadtip').tooltip({
position: {
my: "right top",
at: "center top-10"
},
content:function(callback) {
var loadfile = $('.loadtip').data("info");
$.get(loadfile,{}, function(data) {
callback(data);
});
},
});