javascript - 基于视口(viewport)大小的工具提示动态放置在 Bootstrap 3 中不起作用

Question

我正在使用 Bootstrap 3 的工具提示功能。在文档中，它说我可以调用

placement: 'auto'

在我对工具提示的初始化中，我做了以下事情:

$(".tour-badges li img, .difficulty-rating li").tooltip({ container: 'body', placement: 'auto' });

这应该可以防止工具提示出现在视口(viewport)之外。因此，如果用户在移动设备上查看网站并滚动，因此工具提示触发器位于屏幕顶部，则提示应显示在下方，因为可用屏幕空间是自动计算的。但是，这不起作用。

有谁知道我该如何解决这个问题:

因此它会执行此操作并移动到视口(viewport)中可用空间的位置:

如有任何帮助或提示，我们将不胜感激。

注意

我尝试使用下面的代码来解决这个问题，但这使得工具提示总是出现在内容下方，这不是我想要的。

var test = {
        placement: function (context, source) {
            var position = $(source).position();

            if (position.top < 110) {
                return "bottom";
            }

            return top;
        }
    }

    $(".tour-badges li img, .difficulty-rating li").tooltip(test);

Answer 1

根据 Bootstrap 3 文档:

How to position the tooltip - top | bottom | left | right | auto. When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right.

尝试使用placement: 'auto top'