javascript - ¿Cómo ajusto la posición de un Tooltip de Bootstrap para un elemento determinado?

Tengo estos botones/anclas justo aquí y un tooltip hecho con 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>

y combínalo con el código de jQuery que es este:

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

funcionará perfectamente, mostrando la información sobre herramientas a la derecha.

pero, ¿cómo puedo cambiar la posición del tooltip únicamente del botón1 usando CSS, para poder moverlo más hacia la derecha? ¿sin mover el tooltip del botón2?

Respuesta #1

Aplica el atributo de datos data-placement="right" al elemento donde quieras cambiar la posición del tooltip;

También puedes configurar top, left, right, bottom, auto.

Si quieres más sobre el tooltip. Revisa la configuración de tooltip de Bootstrap

Respuesta #2

Para Bootstrap4, como está utilizando "transform: translate3d" para posicionar la punta, se deben usar left y top en CSS para ajustar la posición de la punta. Por ejemplo, para mover la punta 10px hacia abajo y 10px a la derecha:

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