工具提示不适用于任何不使用：active状态的元素

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元素之外的任何内容后， Tooltip不会disappear ，

我使用错了什么吗？

我希望它只是被shown在hover和留在click ，但如果我点击以外它还是其元素disappear ，而对于手机，因为没有Hover ，留shown的click和隐藏outside click了<span>元素，还是必须使用<button>和<a> ？

Answer 1

我使用错了什么吗？

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

每当我在https://caniuse.com上检查是否支持特定的CSS功能时，Opera Mini几乎总是“红色”，表示“不支持”。

我的建议：忘记Opera Mini。 不值得。 但这只是我个人的看法。 我想我在上面回答了你的问题。 您代码中的工具提示可在我当前的浏览器（Chrome）中完美运行。

引用https://caniuse.com ：

在大多数情况下，Opera Mini的处理是通过Opera服务器完成的，这通常会使JS无法正常工作。

就是这样。