How can I change a Bootstrap 5 tooltip color based on button style?

Question

I need some help I want to change the tooltip background-color based on button main color.

for example: if the button has background-color "primary" the tooltip background-color should be "primary" too...

HTML:

jQuery:

(function (window, document, $, undefined) {
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });

    $(".btn-primary").hover(function () {
        $(".tooltip-inner").css({ "background-color": "var(--bs-primary)" });
    });

    $(".btn-danger").hover(function () {
        $(".tooltip-inner").css({ "background-color": "var(--bs-danger)" });
    });
})(window, document, jQuery);

Live Example: https://codepen.io/themes4all/pen/NWabvad

user_8440598 · Answer

You can make it dynamic using dataset.

In javascript you just need to add hover on button and in handler add dynamic color based on the dataset value.

    $("button").hover(function () {
        $(".tooltip-inner").css({ "background-color": "var(--bs-" + $(this).data("color") + ")" });
        $(".tooltip-arrow").css({ "background-color": "var(--bs-" + $(this).data("color") + ")" });
    });

See the Snippet below:

(function (window, document, $, undefined) {
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });

    $("button").hover(function () {
        $(".tooltip-inner").css({ "background-color": "var(--bs-" + $(this).data("color") + ")" });
    });
})(window, document, jQuery);

See the Codepen here.

user_1264804 · Answer

You get a data attribute, and you get a data attribute!

Since tooltip arrows are pseudo-elements we can't directly style them with CSS. We can use CSS to style them based on their parent elements, though. And since we can't easily remove classes when the color changes, we'll use a data attribute that we can simply overwrite. Building on Nimitt Shah's suggestion to use a data attribute for color, we'll do so.

You may be able to substitute color variables for the hard-coded colors I've used here.

jQuery(function($) {
  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
  var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl);
  });

  $("button").hover(function() {
    $(".tooltip").attr('data-color', $(this).data("color"));
  });
});

.tooltip[data-color=primary] .tooltip-inner {
  background-color: #0d6efd;
}

.tooltip[data-color=primary] .tooltip-arrow:before {
  border-top-color: #0d6efd;
}

.tooltip[data-color=secondary] .tooltip-inner {
  background-color: #6c757d;
}

.tooltip[data-color=secondary] .tooltip-arrow:before {
  border-top-color: #6c757d;
}

.tooltip[data-color=success] .tooltip-inner {
  background-color: #198754;
}

.tooltip[data-color=success] .tooltip-arrow:before {
  border-top-color: #198754;
}

.tooltip[data-color=danger] .tooltip-inner {
  background-color: #dc3545;
}

.tooltip[data-color=danger] .tooltip-arrow:before {
  border-top-color: #dc3545;
}

.tooltip[data-color=warning] .tooltip-inner {
  background-color: #ffc107;
  color: #000;
}

.tooltip[data-color=warning] .tooltip-arrow:before {
  border-top-color: #ffc107;
}

.tooltip[data-color=info] .tooltip-inner {
  background-color: #0dcaf0;
  color: #000;
}

.tooltip[data-color=info] .tooltip-arrow:before {
  border-top-color: #0dcaf0;
}

How can I change a Bootstrap 5 tooltip color based on button style?

2 Answers

You get a data attribute, and you get a data attribute!