Bootstrap 5：使工具提示可懸停和鏈接可點擊

Question

有時您希望在工具提示中包含鏈接並使其可點擊。 因為我沒有為 bootstap 5 找到任何好的答案，所以我花了一些時間才弄清楚我想分享它。

默認的 Bootstrap 5 工具提示初始化如下所示：

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        
new bootstrap.Tooltip(tooltipTriggerEl);

如何保持工具提示可見，而您 hover 在它上面（並取消原始元素）？

Answer 1

如果要啟用工具提示懸停，請將其修改為以下內容：

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        
    new bootstrap.Tooltip(tooltipTriggerEl,{ trigger: 'manual' });
      
    $(tooltipTriggerEl).on("mouseenter", function () {
        var _this = this;
        $(this).tooltip("show");
        $(".bs-tooltip-start").on("mouseleave", function () {
            $(_this).tooltip('hide');
        });
    }).on("mouseleave", function () {
        var _this = this;
        setTimeout(function () {
            if (!$(".bs-tooltip-start:hover").length) {
               $(_this).tooltip("hide");
            }
        }, 300);
    });
});

如果您想在工具提示中包含任何 HTML，請不要忘記將data-bs-html=true添加到元素；）

Answer 2

您需要將工具提示與元素放在同一個容器中。

<div data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" title="Test string">
    <button>Test</button>
</div>

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl, {container: tooltipTriggerEl});
});

Answer 3

我修改了@V1Pr 的答案，並提出了一個 Vanilla JS 方法：

 const tooltipTriggerList = [].slice.call(
    document.querySelectorAll('[data-bs-toggle="tooltip"]')
  );
  const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    const tooltip = new bootstrap.Tooltip(tooltipTriggerEl, {
      trigger: "manual",
    });

    let tooltipTimeout;
    let currentToolTip;

    tooltipTriggerEl.addEventListener("mouseenter", function () {
      let toolTipID;
      
      // Clear Set Timeout
      clearTimeout(tooltipTimeout);

      // Show Tooltip
      tooltip.show();

     // Assign current tooltip ID to toolTipID variable
      toolTipID = tooltipTriggerEl.getAttribute("aria-describedby");

      // Assign current tooltip to currentToolTip variable
      currentToolTip = document.querySelector(`#${toolTipID}`);

      // Hide tooltip on tooltip mouse leave
      currentToolTip.addEventListener("mouseleave", function () {
        tooltip.hide();
      });
    });

   
    tooltipTriggerEl.addEventListener("mouseleave", function () {
      // SetTimeout before tooltip disappears
      tooltipTimeout = setTimeout(function () {
        // Hide tooltip if not hovered.
        if (!currentToolTip.matches(":hover")) {
          tooltip.hide();
        }
      }, 100);
    });

    return tooltip;
  });

HTML：

<span data-bs-toggle="tooltip" data-bs-html="true" title="Check out <a class='text-white opacity-75' href='#'>this link</a>">
 <i class="bi bi-info-square"></i>
</span>