javascript - 工具提示无法与任何不使用 :active state 的元素正常工作

Question

$(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>

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on top">
  Tooltip on top
</button>

<a href='#' data-toggle="tooltip" data-placement="bottom" title="Tooltip on top">
  Tooltip on top
</a>

<span data-toggle="tooltip" data-placement="bottom" title="Tooltip on top">
  Tooltip on top
</span>

在 <button> 中和<a> ，当我点击 Tooltip停留shown ，但是对于<span>它只发生在 hover仅。

我已经在 Opera Mobile Emulator 上尝试过了，有时Tooltip没有disappear单击 Tooltip 之外的任何内容后元素，

是我用错了还是怎么的？

我希望它只是 shown上hover并继续 click ，但是如果我在它或其元素外部单击disappear ，对于移动设备，因为没有 Hover , 留下shown上click并隐藏在 outside click对于<span>元素，还是我必须使用 <button>和<a> ？

Answer 1

Am I using it wrong or something?

不，我不这么认为。您正在谈论 Opera Mobile Emulator，它可能正在尝试模拟 Opera Mini。 Opera Mini 因不支持许多现代 CSS3 功能而臭名昭著。

每当我查看https://caniuse.com时无论是否支持特定的 CSS 功能，Opera Mini 几乎总是“红色”，这意味着“不支持”。

我的建议:忘掉 Opera Mini 吧；不值得。但这只是我个人的意见。我想我上面已经回答了你的问题。您代码中的工具提示在我当前的浏览器(Chrome)中完美运行。

引自https://caniuse.com :

In most cases Opera Mini processing is done via Opera servers, which often prevents JS from working correctly.

这说明了一切。