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:

<button type="button" class="btn btn-lg btn-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Primary">Primary</button>
<button type="button" class="btn btn-lg btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Secondary">Secondary</button>
<button type="button" class="btn btn-lg btn-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Success">Success</button>
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="Danger">Danger</button>
<button type="button" class="btn btn-lg btn-warning" data-bs-toggle="tooltip" data-bs-placement="top" title="Warning">Warning</button>
<button type="button" class="btn btn-lg btn-info" data-bs-toggle="tooltip" data-bs-placement="top" title="Info">Info</button>

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:

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:

<button type="button" class="btn btn-lg btn-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Primary">Primary</button>
<button type="button" class="btn btn-lg btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Secondary">Secondary</button>
<button type="button" class="btn btn-lg btn-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Success">Success</button>
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="Danger">Danger</button>
<button type="button" class="btn btn-lg btn-warning" data-bs-toggle="tooltip" data-bs-placement="top" title="Warning">Warning</button>
<button type="button" class="btn btn-lg btn-info" data-bs-toggle="tooltip" data-bs-placement="top" title="Info">Info</button>

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

• javascript
• html
• jquery
• css

2 Answers 2

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);

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <!-- Bootstrap CSS -->
        <link href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />

        <title>Bootstrap</title>
    </head>
    <body>
        <div class="container mt-5">
<button type="button" class="btn btn-lg btn-primary" data-bs-toggle="tooltip" data-color="primary" data-bs-placement="top" title="Primary">Primary</button>
<button type="button" class="btn btn-lg btn-secondary" data-bs-toggle="tooltip" data-placement="top" title="Secondary" data-color="secondary">Secondary</button>
<button type="button" class="btn btn-lg btn-success" data-bs-toggle="tooltip" data-placement="top" title="Success" data-color="success">Success</button>
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="Danger" data-color="danger">Danger</button>
<button type="button" class="btn btn-lg btn-warning" data-bs-toggle="tooltip" data-bs-placement="top" title="Warning" data-color="warning">Warning</button>
<button type="button" class="btn btn-lg btn-info" data-bs-toggle="tooltip" data-bs-placement="top" title="Info" data-color="info">Info</button>

        </div>
        
        <script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    </body>
</html>

See the Codepen here.

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;
}

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>

<body>
  <div class="container mt-5">
    <button type="button" class="btn btn-lg btn-primary" data-bs-toggle="tooltip" data-color="primary" data-bs-placement="top" title="Primary">Primary</button>
    <button type="button" class="btn btn-lg btn-secondary" data-bs-toggle="tooltip" data-placement="top" title="Secondary" data-color="secondary">Secondary</button>
    <button type="button" class="btn btn-lg btn-success" data-bs-toggle="tooltip" data-placement="top" title="Success" data-color="success">Success</button>
    <button type="button" class="btn btn-lg btn-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="Danger" data-color="danger">Danger</button>
    <button type="button" class="btn btn-lg btn-warning" data-bs-toggle="tooltip" data-bs-placement="top" title="Warning" data-color="warning">Warning</button>
    <button type="button" class="btn btn-lg btn-info" data-bs-toggle="tooltip" data-bs-placement="top" title="Info" data-color="info">Info</button>
  </div>

  <script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>