基于视口大小动态放置工具提示不起作用Bootstrap 3

Question

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

  

展示位置：＆＃39;自动＆＃39;

在我初始化工具提示时，我做了以下事情：

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

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

有谁知道如何解决这个问题：

相反，它会执行此操作并移至视口中可用空间的位置：

非常感谢任何帮助或提示。

N.B。

我尝试使用以下代码来解决此问题，但这会使工具提示始终显示在内容之下，而不是我想要的内容。

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文档：

  

如何定位工具提示 - 顶部|底部|离开|对|汽车。   当＆＃34; auto＆＃34;如果指定，它将动态重新定向工具提示。例如，如果展示位置为＆＃34;自动离开＆＃34;，则工具提示会尽可能显示在左侧，否则它将显示正确。

尝试使用placement: 'auto top'