jQueryUI tooltip set different positions for different classes

Question

I just followed this instruction to make jQueryUI tooltip load content via ajax. (fiddle)(Full Screen). The problem is that I can't set a different position for the second tooltip (.loadtip)from the first one. Can anyone tell me if it's possible to overwrite the first tooltip's position?

Code:

   $(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); 
            });
           },


      });

Answer 1

You can set position during initialization. For instance, if you have two classes, 'class-a' and 'class-b', then different positions can be set for these two classes as follows:

$( ".class-a" ).tooltip({ position: { my: "left+30 center", at: "right center" } });

$( ".class-b" ).tooltip({ position: { my: "left+15 right", at: "right right" } });