javascript - Hvordan justerer jeg posisjonen til en Bootstrap-tooltip for et bestemt element?

Jeg har disse knappene/ankrene akkurat her og en tooltip laget 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 dette:

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

det vil fungere helt fint, og vise verktøytipset på høyre side.

men hvordan kan jeg endre posisjonen til verktøytipset til bare knapp1 ved å bruke CSS, slik at jeg kan flytte det lenger til høyre? uten å flytte verktøytipset til knapp2?

Svar #1

Bruk data-placement="right" data-attributt på elementet der du vil endre plasseringen av verktøytipset;

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

Hvis du vil ha mer om verktøytips. Sjekk bootstrap-verktøytipsinnstillingene

Svar #2

For Bootstrap4, siden det bruker "transform: translate3d" for å posisjonere pekeren, bør venstre og topp brukes i CSS for å justere pekerens posisjon. For eksempel, for å flytte pekeren 10px ned og 10px til høyre:

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