Tippy.js 无法获取工具提示以使用 .show() 函数以编程方式显示

Question

我最近一直在尝试实现工具提示以在包含滚动条的长文档中显示错误。我最初是从使用 bootstrap 工具提示开始的，但是运行遇到了此处描述的 z-index 的一些限制：Unable to get Bootstrap Tooltip to display above div when inside scroll pane

我已经尝试切换到 tippy.js 希望有更好的运气。但是，我无法使用与文档完全相同的示例以编程方式显示工具提示：

const tip = tippy('#myButton')
const el = document.querySelector('#myButton')
const popper = tip.getPopperElement(el)
tip.show(popper)

基本上它仍然具有正常的悬停行为。我已经创建了一个 jsfiddle 示例，它几乎准确地说明了我当前页面的布局方式，并希望触发工具提示在页面加载时显示，而不是在悬停时显示！

这是 jsfiddle：https://jsfiddle.net/L3jv4a9w/1/

Answer 1

问题出在您使用的元素选择器上。

如果您将代码更新为以下内容，它就可以工作

const tip = tippy('.root2');
const el = document.querySelector('.root2')
const popper = tip.getPopperElement(el);
tip.show(popper);

请参阅 js fiddle here 或下面的操作示例。

const tip = tippy('.root2');
const el = document.querySelector('.root2')
const popper = tip.getPopperElement(el)
tip.show(popper)

<link href="https://unpkg.com/tippy.js@1.2.0/dist/tippy.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://unpkg.com/tippy.js@1.2.0/dist/tippy.js"></script>


<div class="root2" title="This is a tooltip"> <b>Tooltip</b>
</div>

Tippy.js 无法获取工具提示以使用 .show() 函数以编程方式显示

Tippy.js cannot get tooltip to programatically show using .show() function

javascript

html

twitter-bootstrap-3

tooltip

popover