如何根据按钮样式更改 Bootstrap 5 工具提示颜色？答案

【问题标题】：How can I change a Bootstrap 5 tooltip color based on button style?如何根据按钮样式更改 Bootstrap 5 工具提示颜色？
【发布时间】：2022-01-17 21:05:29
【问题描述】：

我需要一些帮助，我想根据按钮主颜色更改工具提示 background-color。

例如：如果按钮有background-color "primary"，则工具提示background-color 也应该是"primary"...

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

现场示例： https://codepen.io/themes4all/pen/NWabvad

【问题讨论】：

标签： javascript html jquery css

【解决方案1】：

您可以使用 dataset 使其动态化。

在 javascript 中，您只需在 button 上添加 hover 并在处理程序中根据数据集值添加动态颜色。

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

请看下面的片段：

(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/bootstrap@5.1.3/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.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    </body>
</html>

请参阅Codepen here。

【讨论】：

如何更改箭头颜色？

【解决方案2】：

你得到一个数据属性，你得到一个数据属性！

由于工具提示箭头是伪元素，我们不能直接使用 CSS 设置它们的样式。不过，我们可以使用 CSS 根据它们的父元素来设置它们的样式。由于当颜色改变时我们不能轻易地删除类，我们将使用一个我们可以简单地覆盖的数据属性。在 Nimitt Shah 的 suggestion 的基础上使用颜色数据属性，我们将这样做。

您可以用颜色变量代替我在这里使用的硬编码颜色。

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/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 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.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>

【讨论】：