如何在懸停時更改Bootstrap5工具提示背景顏色？-有解無憂

我需要一些幫助，我想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);

現場示例： https : //codepen.io/themes4all/pen/NWabvad

uj5u.com熱心網友回復：

您可以使用dataset.

在JavaScript中，你只需要添加hover的button，并基于該資料集值處理程式添加動態色彩。

    $("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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    </body>
</html>

請參閱此處的Codepen。

uj5u.com熱心網友回復：

你得到一個資料屬性，你得到一個資料屬性！

由于工具提示箭頭是偽元素，我們不能直接使用 CSS 設定它們的樣式。不過，我們可以使用 CSS 根據它們的父元素來設定它們的樣式。由于我們無法在顏色更改時輕松洗掉類，因此我們將使用可以簡單覆寫的資料屬性。根據 Nimitt Shah 的建議，將資料屬性用于顏色，我們將這樣做。

您可以將顏色變數替換為我在這里使用的硬編碼顏色。

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 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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/380672.html

標籤：javascript html 查询 css

上一篇：從matplotlib(MonthLocator)中洗掉年份標簽

下一篇：滑鼠懸停1秒后觸發事件