javascript - 单击后打开新选项卡后,附加到 anchor 的引导工具提示将保持打开状态

标签 javascript jquery html

我用悬停时的引导工具提示制作了一个简单的 anchor 。 我注意到,单击“ anchor ”时,引导工具提示会保持打开状态,并且会打开新选项卡。一旦您返回到 window.opener(在本例中为 fiddle ),工具提示仍然打开,并且每当您单击文档时它就会关闭。

避免这种情况的最佳方法是什么?我尝试在点击期间执行 tooltip('destroy') ,当然返回 true,否则 anchor href 将不起作用。但这不起作用。工具提示仍然显示。

也尝试触发文档点击,但也没有解决。

这是fiddle 。 (注意到代码在 stackoverflow fiddle 上不起作用,这就是为什么我将它也链接到 jsfiddle)

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<div data-toggle="tooltip" title="Google Link">
  <a href="https://www.google.com" target="_blank">
    Click me!
  </a>
</div>

最佳答案

我相信这就是您正在寻找的答案......

Bootstrap's tooltip doesn't disappear after button click & mouseleave

$(function () {
  $('[data-toggle="tooltip"]').tooltip({trigger : 'hover'})
})

关于javascript - 单击后打开新选项卡后,附加到 anchor 的引导工具提示将保持打开状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49412682/

相关文章:

javascript - 使用 jQuery 附加表格行 - 最佳实践

javascript - bootstrap-slider链接输入数字与幻灯片变化

javascript - 如何制作这个 Gauge 微分 Angular ?

html - 如何定位导航栏?

html - 尽管类不同,动画只发生在一个复选框上

javascript - 为什么 RegExp 版本在/patt/version 工作时不工作? (JavaScript)

javascript - 未捕获的 TypeError : Cannot read property 'name' of undefined at Constructor. 渲染

javascript - 为除 js 文件之外的所有文件禁用 eslint?

javascript - 通过 URI 传递 "("和 ")"会导致 403 错误,我如何对它们进行编码?

html - 居中 2 个水平图像