jquery - JQuery UI 工具提示碰撞定位问题

Question

我创建了一个带有图像连接器的工具提示（使用 JQuery UI）。小提琴在这里

http://jsfiddle.net/FRAtC/

$(document).tooltip({ 
    position: { my: "left bottom-5", at: "left top",
    using: function( position, feedback ) {
        $( this ).css( position );
        $( "<div>" )
        .addClass( "arrow" )
        .addClass( feedback.vertical )
        .addClass( feedback.horizontal )
        .appendTo( this );
    }
},
show: false,
hide: false 
});

当未检测到碰撞时，底部图像上的工具提示看起来很棒。但是当检测到碰撞时（上图），工具提示会翻转到底部，但箭头的位置是错误的。

我是定位元素的新手。我如何确保当工具提示翻转时，它保持在一起并与图像的底部对齐，因为它与顶部对齐？

谢谢！

Answer 1

只需添加margin-top:10px以下规则。这样箭头就卡在了tootip块部分。

.arrow.top {
    top: -16px;
    bottom: auto;
    margin-top:10px; /*This one*/
}

小提琴