javascript - Làm thế nào để tôi điều chỉnh vị trí của Tooltip trong Bootstrap cho một phần tử nhất định?

Tôi có những nút/neo ngay ở đây và một tooltip được tạo bằng 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>

và kết hợp nó với mã jQuery như sau:

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

Nó sẽ hoạt động hoàn hảo, hiển thị gợi ý công cụ ở bên phải.

nhưng làm thế nào để tôi có thể thay đổi vị trí của tooltip chỉ của button1 bằng CSS, để tôi có thể di chuyển nó sang phải hơn? mà không làm di chuyển tooltip của button2?

Câu trả lời #1

Áp dụng thuộc tính dữ liệu data-placement="right" cho phần tử mà bạn muốn thay đổi vị trí của tooltip;

Bạn cũng có thể thiết lập top, left, right, bottom, auto.

Nếu bạn muốn biết thêm về tooltip. Hãy kiểm tra cài đặt tooltip của Bootstrap

Câu trả lời #2

Đối với Bootstrap4, vì nó sử dụng "transform: translate3d" để định vị phần gợi ý, nên sử dụng left & top trong CSS để điều chỉnh vị trí của phần gợi ý. Ví dụ, để di chuyển phần gợi ý xuống 10px và sang phải 10px:

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