Question

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

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

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

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

谢谢！

Answer 1

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

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

<强> Fiddle

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

1 个答案: