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*/ 
} 

Fiddle