javascript - Bootstrap 5 : make tooltip hoverable and link clickable

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

当您将鼠标悬停在工具提示上(并将鼠标悬停在原始元素上)时，如何保持工具提示可见？

Answer 1

我修改了@V1Pr's answer并提出了 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>