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 tooltip settings

Answer 2

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

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

#btn1选择器按ID选择，只匹配第一个按钮。

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

编辑：

这是here。您可以更改值并查看其工作原理。

Answer 3

对于Bootstrap4，由于它使用“ transform：translate3d”来定位笔尖，因此应在CSS中使用left和top来调整笔尖的位置。例如，将笔尖向下移动10px，向右移动10px：

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

如何为某个元素调整Bootstrap的工具提示的位置？

3 个答案: