Выровнять всплывающую подсказку JQuery UI

Question

Мне нужна помощь, чтобы выровнять всплывающую подсказку jQuery UI в верхней части элемента.

Это мой код до сих пор

JSbin: http://jsbin.com/teqori/2/edit?html,css,js,console,output

JS:

$(function() {
    $(document).tooltip({
    items:'a[tip]',
    position: {
        my: "top",
        at: "right top",
    },
    content: function(){
        if($(this).is('[tip]')){
            var src = $(this).attr('tip');
            return '<img class = "toolTipPopUp" src ="'+src+'">'
        }
    }
    });
});

CSS

    img.productImg {
        border: 1px solid;
        padding-bottom: 10px;
        height:800px;   
    }

    img.toolTipPopUp{
        border: 1px solid;
        padding-bottom: 10px;
        height:600px;   
    }

HTML

<a tip = "http://upload.wikimedia.org/wikipedia/commons/thumb/8/84/March_5_1895_San_Francisco_Call_newspaper.png/444px-March_5_1895_San_Francisco_Call_newspaper.png"><img class = "productImg"  src = "http://upload.wikimedia.org/wikipedia/commons/thumb/8/84/March_5_1895_San_Francisco_Call_newspaper.png/444px-March_5_1895_San_Francisco_Call_newspaper.png"></a>

Answer 1

Попробуйте установить ссылку для встроенного блока

a[tip] { display: inline-block; }

и позиция в

position: {
    my: "left top",
    at: "left top"
},