Javascript 基于视口大小的工具提示的动态放置不适用于Bootstrap 3

我正在使用Bootstrap3的工具提示功能。文件上说我可以打电话

位置：“自动”

在工具提示的初始化过程中，我做了以下工作：

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

这将防止工具提示出现在视口之外。因此，如果用户在手机上查看站点，并滚动鼠标，使工具提示触发器位于屏幕顶部，则tootip应显示在下方，因为可用屏幕空间是自动计算的。然而，这是行不通的

有人知道我如何解决这个问题吗：

因此，它会执行此操作并移动到视口中有可用空间的位置：

任何帮助或提示都将不胜感激

注意

我尝试使用以下代码修复此问题，但这会使工具提示始终显示在我不想要的内容下方

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);

var测试={
位置：函数（上下文、源）{
var position=$（source.position（）；
如果（位置顶部<110）{
返回“底部”；
}
返回顶部；
}
}
$（“.tour徽章li img，.难度等级li”）。工具提示（测试）；

根据Bootstrap 3文档：

如何定位工具提示-顶部|底部|左侧|右侧|自动。 当指定“自动”时，它将动态地重新定向工具提示。例如，如果“放置”为“自动向左”，则工具提示将尽可能显示在左侧，否则将显示在右侧

---

尝试使用

placement:'auto top'

这不起作用。正如我上面已经提到的，使用placement auto甚至placement auto top都不起作用。工具提示仅延伸到折叠上方。