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

Posted

技术标签:

【中文标题】如何根据按钮样式更改 Bootstrap 5 工具提示颜色？【英文标题】：How can I change a Bootstrap 5 tooltip color based on button style? 【发布时间】：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

【问题讨论】：

【参考方案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>

【讨论】：

以上是关于如何根据按钮样式更改 Bootstrap 5 工具提示颜色？的主要内容，如果未能解决你的问题，请参考以下文章

使用 Bootstrap 自定义更改按钮上的悬停颜色

在 ExtJS 中，如何禁用悬停在禁用工具栏按钮上的样式更改？

如何使用 CSS 更改 Angular-UI Bootstrap Datepicker 弹出窗口的样式？

从 Angular 5 升级到 Angular 6，Bootstrap 按钮样式没有间距

如何更改 Bootstrap 3 模态的 CSS 样式？

具有点击事件的卡片组件内的 Bootstrap 4 按钮