0

我正在尝试使用tippy来创建一个工具提示，我认为这是一个相对简单的用例。

当我的页面加载时，我有一个调用简单 API 来获取数据的 js 脚本，它返回数据并出于多种原因使用它。一个原因是将其添加到如下提示工具提示中：

document.getElementById("innerInfo").innerHTML = "Info: " + data.info;

我的小费脚本是：

    <script>
        tippy('.tippy-btn');       
        tippy('#info', {
            html: document.querySelector('#info_html'),
            arrow: true,
            animation: 'fade'
        });
    </script>

还有我的 HTML：

<div id="info_html" data-template>
    <div style="padding:20px">
        <h5>Hi</h5>
        <h5 id="innerInfo"></h5>
    </div>
</div>

出现Hi，但在控制台日志中，我的 onload 脚本找不到info_html要编辑的 div innerInfo-Cannot set property 'innerHTML' of null

我不想为tippy触发器上的数据调用API。谁能指出我正确的方向，以便能够在页面加载时编辑提示内容的 innerHTML？

仅供参考 - HTML 代码的顺序：HTML 第一，onload.js 第二，tippy 第三

提前致谢！

4

1 回答 1

0

不一定是最佳答案，但尽管有顺序，因为 onload.js 先调用，它没有先完成，所以在 onload 完成之前，tippy 触发（并隐藏）了 div。

因此，为了解决它，我确保一旦完成，onload 就会调用tippy。

理想情况下，有一种方法仍然可以调用和编辑它而不必这样做？

于 2021-05-14T17:21:00.940 回答