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

Question

我最近一直在尝试实现工具提示，以在包含滚动条的长文档中显示错误。我最初是从使用引导工具提示开始的，但在此处描述的 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>