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

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"  data-bs-toggle="tooltip" data-bs-placement="top" title="Primary">Primary</button>
<button type="button"  data-bs-toggle="tooltip" data-bs-placement="top" title="Secondary">Secondary</button>
<button type="button"  data-bs-toggle="tooltip" data-bs-placement="top" title="Success">Success</button>
<button type="button"  data-bs-toggle="tooltip" data-bs-placement="top" title="Danger">Danger</button>
<button type="button"  data-bs-toggle="tooltip" data-bs-placement="top" title="Warning">Warning</button>
<button type="button"  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

CodePudding user response：

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.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />

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

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

See the Codepen here.

CodePudding user response：

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 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
</head>

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

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