定位和翻转 jQuery UI 工具提示和指针答案

【问题标题】：Positioning and flipping jQuery UI tooltips and pointers定位和翻转 jQuery UI 工具提示和指针
【发布时间】：2018-09-05 22:23:22
【问题描述】：

$(".box").tooltip({
    show: false,
    hide: false,
    position: {
        my: "center bottom-25",
        at: "center top",
        collision: "flipfit flip",
        using: function( position, feedback ) {
            $(this).css( position );
            $("<div>")
                .addClass( "ui-tooltip-arrow" )
                .addClass( feedback.vertical )
                .addClass( feedback.horizontal )
                .appendTo( this );
        }
    }
});

演示：http://jsfiddle.net/av4je/

除了右对齐的工具提示之外，一切都按预期工作。

有没有办法让他们的指针也翻转？

【问题讨论】：

这是你所期待的吗？jsfiddle.net/av4je/8
没有。在我的演示中，左对齐和居中对齐的工具提示按预期工作。您的演示更改了所有工具提示的行为。我想要的是右对齐的工具提示会像左对齐一样显示，并且会（水平）翻转/镜像。

标签： jquery jquery-ui tooltip positioning jquery-ui-tooltip

【解决方案1】：

事情是，在 .addClass(feedback.horizontal) 语句中，它实际上是在添加左类，因此它会将箭头向左对齐。

请通过将左侧类的内容更改为右侧类的内容来检查，即用“.ui-tooltip-arrow.right”的内容替换“.ui-tooltip-arrow.left”类的内容

你会得到你的解决方案。

【讨论】：

【解决方案2】：

旧线程，但如果有人遇到同样的问题：

替换

.addClass(feedback.horizontal)

与

.addClass((feedback.element.left + 10 >= feedback.target.left ? 'left' : 'right'))

（feedback.horizontal 不可靠）

【讨论】：