javascript - Hvordan justerer jeg positionen på en Bootstraps tooltip for et bestemt element?

Jeg har disse knapper/ankre lige her og en tooltip lavet med 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>

og kombiner det med jQuery-koden, som er denne:

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

det vil fungere helt fint og vise værktøjstipset til højre.

men hvordan kan jeg ændre placeringen af tooltippen for kun knap1 ved hjælp af CSS, så jeg kan flytte den længere til højre? uden at flytte knap2's tooltip?

Svar #1

Anvend data-placement="right" data-attributten på det element, hvor du ønsker at ændre placeringen af tooltip.

Du kan også indstille top, left, right, bottom, auto.

Hvis du vil have mere om tooltip. Tjek bootstrap tooltip-indstillinger

Svar #2

For Bootstrap4, da det bruger "transform: translate3d" til at placere tippet, bør left & top bruges i CSS til at justere tippets position. For eksempel, for at flytte tippet 10px ned og 10px mod højre:

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