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)

请参阅下面的UseSimpleDictionaryFormat或示例。

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

@Override
protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
        return application.sources(Application.class)
              .properties("propertyKey=propertyValue");
}

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

1 个答案: