如何在将鼠标悬停在工具提示本身上时保持 bootstrap4 工具提示打开？

Question

我想要完成的是拥有一个悬停时带有工具提示的链接。显示工具提示后，我希望当用户将鼠标悬停在工具提示本身上时工具提示保持可见。我查看了 bootstrap 文档，我不相信这个功能已经存在。我找到了一些关于如何使用 Bootstrap3 执行此操作的答案，但我使用的是 Bootstrap4。

我确实设法使用工具提示上的延迟来完成我需要的任务。将鼠标从我的链接上移开后，它会保持可见 1 秒：

    $(function () {
        $('[data-toggle="tooltip"]').tooltip({delay: {show: 0, hide: 1000}});
    });

小提琴： https: //jsfiddle.net/16gnysbp/

任何帮助是极大的赞赏。谢谢你！

Answer 1

您可以猴子修补工具提示并防止hide()鼠标位于工具提示本身内。棘手的部分是跟踪鼠标并确保当鼠标不再悬停在提示上时隐藏工具提示。这是一个小演示：

var cx, cy, tip, waiting;
var old_hide = bootstrap.Tooltip.prototype.hide

var isOutside = function() {
  return ((cx < tip.left || cx > tip.left + tip.width) || 
          (cy < tip.top || cy > tip.top + tip.height))
}

document.addEventListener('mousemove', function(e) {
  cx = e.clientX
  cy = e.clientY
  if (waiting && isOutside()) {
    waiting.f.call(waiting.context)
    waiting = null
  } 
})

bootstrap.Tooltip.prototype.hide = function() {
  tip = this.getTipElement().getBoundingClientRect()
  if (isOutside()) {
    old_hide.call(this)
  } else {
    waiting = { f: old_hide, context: this }
  }
}

分叉小提琴 -> https://jsfiddle.net/8v2ds7Lt/

它还适用于多个工具提示。代码应该包装成更优雅的东西，只是演示这个概念。