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

Question

我最近一直在尝试实现工具提示，以在包含滚动条的长文档中显示错误。我最初开始使用引导工具提示，但遇到了此处描述的 z-index 的一些限制：无法让引导工具提示显示在滚动窗格内时显示在div 上方

从那以后，我尝试切换到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 小提琴或下面的操作示例。

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>