根據視口大小動態放置工具提示不起作用Bootstrap 3

Question

我正在使用Bootstrap 3的工具提示功能。在文檔中，它說我可以打電話

展示位置：“自動”

在初始化工具提示時，我做了以下工作：

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

這樣可以防止工具提示出現在視口之外。 因此，如果用戶在移動設備上查看網站並滾動，使工具提示觸發器位於屏幕頂部，則提示將顯示在下方，因為自動計算了可用的屏幕空間。 但是，這不起作用。

有誰知道我該如何解決這個問題：

因此，它執行此操作，然后移至視口中有可用空間的位置：

任何幫助或技巧將不勝感激。

NB

我嘗試使用以下代碼來解決此問題，但這使工具提示始終顯示在我想要的內容下方。

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

如何放置工具提示-頂部| 底部| 左| 對| 汽車。 指定“自動”時，它將動態調整工具提示的方向。 例如，如果放置為“自動左”，則工具提示將在可能的情況下顯示在左側，否則將顯示在右側。

嘗試使用placement: 'auto top'