Hướng dẫn đổi màu background Tooltip Boostrap 4 (How to change background color Boostrap 4 Tooltip)

Như các bạn đã biết, Tooltip là phần mô tả cho một element nào đó khi bạn hover chuột vào thì phần mô tả đó sẽ hiện ra. Mặc định phần mô tả này được Boostrap gán cho giá trị màu nền là màu đen, chữ trắng như hình bên dưới đây

Vậy muốn thay đổi các màu này và nếu có nhiều element sử dụng tooltip , mỗi element muốn gán một giá trị màu nền khác nhau thì mình làm sao? Nếu sử dụng Boostrap 3, thì rất dễ, bạn có thể tham khảo tại W3School Boostrap 3 Tooltip nhoé

Ở bài viết này, mình sẽ sử dụng Boostrap 4. Boostrap 4 thì nó không cho thay đổi dễ dàng như Boostrap 3

Cách làm như sau :

Đầu tiên đây là đoạn HTML của mình

<div class="list-button-add-to-cart">
     <button class="btn btn-add-to-cart" data-toggle="tooltip" data-placement="right" title="Thêm vào giỏ hàng"><i class="fas fa-shopping-bag"></i></button> 
   <button class="btn btn-like"  data-toggle="tooltip" data-placement="right" title="Thêm vào yêu thích"><i class="fas fa-heart"></i></button>      
</div> 

Sẽ có 2 nút button, 1 nút là thêm sản phẩm vào giỏ hàng, 1 nút là thêm sản phẩm vào danh sách yêu thích

Bây giờ , quy định:

• Nút button thêm giỏ hàng: background màu xanh dương, chữ trắng
• Nút button thêm yêu thích: background màu đỏ, chữ trắng

Boostrap 4 Tooltip có các class như sau:

• tooltip.bs-tooltip-position : dùng để định vị trí hiển thị của mess thông báo khi bạn hover chuột vào. Lưu ý thay chữ postion bằng 1 trong 4 chữ left, right, top, bottom tương ứng trái, phải, trên, dưới và  position phải giống position của data-placement="position" của html
• tooltip-inner : nằm trong class tooltip.bs-tooltip-position, dùng để set màu background cho mess hiển thị
• arrow:before : nằm trong class tooltip.bs-tooltip-position, dùng để set màu mũi tên trỏ vào vị trí element

Nếu bạn viết css cho các class này và gán giá trị màu cho nó thì 2 nút button chỉ nhận được cùng 1 màu. Để tách ra, từng button sẽ có màu mess khác nhau thì có trick như vầy bạn phải bọc cái element sử dụng data tooltip bằng 1 thẻ span có 1 class tương ứng và mỗi thẻ span này có class khác tên nhau. Element bị bọc lại (ở đây là button) sẽ thêm 1 thuộc tính là data-container=".tên class của thẻ span",sau đó chỉnh css bình thường, bắt đầu từ class của thẻ span, rồi đến các class của boostrap tooltip

Cụ thể code HTML sẽ sửa lại như sau

<div class="list-button-add-to-cart">

<span class="wrap-tooltip-style-1">

<button class="btn btn-add-to-cart" 

          data-container=".wrap-tooltip-style-1" 

          data-toggle="tooltip" data-placement="right" 

           title="Thêm vào giỏ hàng">

           <i class="fas fa-shopping-bag"></i>

        </button> 

</span>

<span class="wrap-tooltip-style-2">

<button class="btn btn-like" 

        data-container=".wrap-tooltip-style-2" 

        data-toggle="tooltip" data-placement="right"

title="Thêm vào yêu thích">

        <i class="fas fa-heart"></i>
      </button>     
</span>
</div>

Code css như sau:

.wrap-tooltip-style-1   .tooltip-inner {
        background-color: #2f4581 ;
}
.wrap-tooltip-style-2   .tooltip-inner {
    background-color: #c03737;
}

.wrap-tooltip-style-1 .tooltip.bs-tooltip-right .arrow:before {
    border-right-color:  #2f4581  !important;
}

.wrap-tooltip-style-2 .tooltip.bs-tooltip-right .arrow:before {
    border-right-color: #c03737 !important;
}

Kết quả khi chạy lên sẽ như thế này

Lưu ý là cách này chỉ áp dụng được cho 1 item chứa nhiều button thôi nhoé,

Nếu bạn muốn sử dụng cho nhiều item sản phẩm thì hãy sử dụng Tooltipster

Chúc các bạn thành công :)