Question

我要完成的工作是拥有一个链接，该链接上有一个悬停工具提示。显示工具提示后，我希望在用户将鼠标悬停在工具提示本身上时，工具提示保持可见。我查看了引导程序文档，但我不相信此功能已经存在。我找到了一些有关如何使用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/vjkc0res/

它也可以使用多个工具提示。该代码应该包装在更优雅的内容中，仅用于演示概念。

Answer 2

也许Popover是实现目标的更好方法。

在我的示例中，我将按钮包裹在一个跨度中，并且在跨度悬停时，按钮变得聚焦。为防止弹出窗口消失，将data-triger="focus"添加到按钮上。

JSFiddle

编辑：我看到您实际上希望能够复制文本，这对我有用，但是当我重新加载时，它停止了...奇怪。 This is probably not the way you are meant to do this，但是我将data-trigger属性设置为manual，因此您可以完全控制show和hide。显示弹出窗口时将出现一个按钮，以便用户可以将其关闭。

悬停在工具提示本身上时，如何保持bootstrap4工具提示处于打开状态？

2 个答案: