如何在加载时编辑提示工具提示内容innerHTML

编程问答 2022-05-01

问题描述

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

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

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 出现，但在控制台日志中，我的加载脚本找不到 info_html div 来编辑 innerInfo - Cannot set property 'innerHTML' of null

我不想调用 API 来获取关于 Tippy 触发器的数据。任何人都可以指出我正确的方向，以便能够在页面加载时编辑提示内容的 innerHTML？

仅供参考 - HTML 代码的顺序：HTML 1st，onload.js 2nd，tippy 3rd

提前致谢！

解决方法

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

为了解决这个问题，我确保在完成后 onload 调用了tippy。

理想情况下，有没有办法仍然调用和编辑它而不必这样做？

htmljavascripttippyjstooltiptooltiptooltip