Bootstrap 5: Change button tooltip background color on hover-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")   ")" });
    });

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.