如何更改 hover 上的 Bootstrap 5 工具提示背景颜色？
[英]How can I change a Bootstrap 5 tooltip background color on hover?
问题描述
我需要一些帮助我想根据按钮主颜色更改工具提示background-color颜色。
例如：如果按钮的background-color “主要” ，则工具提示background-color也应为“主要” ...
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);
2 个解决方案
解决方案1
0 2021-12-14 15:07:32
您可以使用dataset使其动态化。
在 javascript 中，您只需在button上添加hover并在处理程序中根据数据集值添加动态颜色。
$("button").hover(function () {
$(".tooltip-inner").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 。
解决方案2
0 2021-12-14 18:30:18
你得到一个数据属性，你得到一个数据属性！
由于工具提示箭头是伪元素，我们不能直接使用 CSS 设置它们的样式。 不过，我们可以使用 CSS 根据其父元素设置样式。 由于当颜色改变时我们不能轻易地删除类，我们将使用一个我们可以简单地覆盖的数据属性。 基于 Nimitt Shah 对颜色使用数据属性的建议，我们将这样做。
您可以将颜色变量替换为我在这里使用的硬编码 colors。
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 4 更改下拉菜单活动背景颜色？
[英]How can I change dropdown menu active background color with Bootstrap 4?
如何更改 hover 表元素的行和列背景色？
[英]How can I change the row and colum background-color on hover a table element?
如何在seiyria bootstrap-slider处于禁用模式时更改工具提示背景颜色？
[英]How to change the tooltip background color for seiyria bootstrap-slider when it is in disabled mode?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.