CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Twish
Twish

Reputation: 71

How do i adjust the position of a Bootstrap's Tooltip for a certain element?

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?

Upvotes: 6

Views: 39873

Answers (3)

dhqvinh
dhqvinh

Reputation: 357

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

Upvotes: 0

Mosho
Mosho

Reputation: 7078

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.

Upvotes: -2

Maulik Anand
Maulik Anand

Reputation: 1449

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

Upvotes: 8

Related Questions