如何调整特定元素的Bootstrap工具提示的位置？

Question

我在这里有这些按钮/锚，还有引导程序制作的工具提示：

<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"data属性应用于要更改toolip位置的元素；

您也可以设置。top，left，right，bottom，auto。

如果您想进一步了解工具提示。检查引导工具提示设置

Answer 2

查看的APItooltip。您可以执行以下操作来更改工具提示的位置：

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

选择#btn1器按 id 进行选择，并且仅匹配第一个按钮。

您可以在此处找到有关位置对象含义的详细信息。

编辑：

这是一个演示。您可以更改这些值并查看其工作原理。