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

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

• javascript
• jquery
• html
• css
• twitter-bootstrap

3 Answers 3

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

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

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.