如何調整Bootstrap的工具提示的位置？

Question

我在這里有這些按鈕/錨點和Bootstrap制作的工具提示：

<a id="btn1" class="mybutton" data-container="body" data-toggle="tooltip" data-placement="right" title="my tooltip">
    Hover Me To Display Tooltip
</a>

<a id="btn2" class="mybutton" data-container="body" data-toggle="tooltip" data-placement="right" title="my tooltip">
    Hover Me To Display Tooltip
</a>

並將其與jQuery代碼結合使用，如下所示：

$(document).ready(function(){
    $(".mybutton").tooltip();
});

它將完美地工作，在右側顯示工具提示。

但是如何使用CSS更改button1的工具提示的位置，以便我可以將它向右移動？ 沒有移動button2的工具提示？

Answer 1

將data-placement="right"數據屬性應用於要更改toolip位置的元素;

你也可以設置。 top ， left ， right ， bottom ， auto 。

如果您想了解更多關於工具提示的信息。 檢查bootstrap工具提示設置

Answer 2

對於Bootstrap4，由於它使用“transform：translate3d”來定位尖端，因此應在CSS中使用left和top來調整尖端的位置。 例如，將尖端向下移動10px和向右10px：

 .tooltip-class { left: 10px; top: 10px; } 

Answer 3

查看tooltip的API 。 您可以執行以下操作來更改工具提示的位置：

$( "#btn1" ).tooltip({ position: { my: "left+15 center", at: "right center" } });

#btn1選擇器按id選擇，只匹配第一個按鈕。

您可以在此處找到有關位置對象含義的詳細信息。

編輯：

這是一個演示 。 您可以更改值並查看其工作原理。