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

Question

I have these buttons/anchors right here and a Bootstrap made tooltip :

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

and combine it with the jQuery code which is this :

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

it will work perfectly fine, displaying the tooltip on the right.

but how can i change the position of the tooltip of only button1 using CSS, so that i can move it further to the right? without moving the button2's tooltip?

Answer 1

Apply data-placement="right" data attribute to the element where you want to change position of toolip;

You can also set. top , left , right , bottom , auto .

If you want more about tooltip. Check bootstrap tooltip settings

Answer 2

For Bootstrap4, as it's using "transform: translate3d" to position the tip, left & top should be used in CSS to adjust the tip's position. For example, to move the tip down 10px and right 10px:

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

Answer 3

Look at the API for tooltip . You can do something like this to change the tooltip's position:

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

The #btn1 selector selects by id and will only match the first button.

You can find details on what the position object means here .

Edit:

Here is a demo . You can change the values and see how it works.