如何在工具提示本身悬停时保持bootstrap4工具提示打开?

问题描述 投票:1回答:2

我想要完成的是拥有一个悬停工具提示的链接。显示工具提示后,我希望工具提示在用户悬停在工具提示本身时保持可见。我查看了bootstrap文档,我不相信这个功能存在。我找到了一些关于如何使用Bootstrap3做到这一点的答案,但我在Bootstrap4上。

我确实设法通过工具提示延迟完成了我需要的工作。将鼠标从链接上移开后,它会保持1秒钟可见:

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

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

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

twitter-bootstrap bootstrap-4
2个回答
2
投票

如果鼠标位于工具提示本身内,您可以修补工具提示并阻止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/

它也适用于多个工具提示。代码应该包含在更优雅的东西中,只是展示了这个概念。


0
投票

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

在我的例子中,我将按钮包裹在跨度中,并且在跨度上悬停按钮变得聚焦。他们防止弹出消失,将data-triger="focus"添加到按钮。

JSFiddle

编辑:我看到你真的希望能够复制文本,这对我有用,但当我重新加载它停止...奇怪。 This is probably not the way you are meant to do this,但我已将data-trigger属性设置为手动,以便您可以完全控制showhide。弹出窗口显示时会出现一个按钮,以便用户可以关闭它。

© www.soinside.com 2019 - 2024. All rights reserved.