How to edit tippy tooltip content innerHTML on load

Question

I am trying to use tippy to create a tool tip, in what I thought was a relatively simple use-case.

When my page loads I have a js script that calls a simple API to get data, it returns the data and uses it for multiple reasons. One reason is to add it to a tippy tooltip as below:

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

My tippy script is:

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

And my HTML:

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

The Hi appears, but in console log, my onload script cannot find the info_html div to edit innerInfo - Cannot set property 'innerHTML' of null

I do not want to call the API for data on tippy trigger. Can anyone point me in the right direction to be able to edit innerHTML of tippy content on page load?

FYI - order of HTML Code: HTML 1st, onload.js 2nd, tippy 3rd

Thanks in advance!

Answer 1

Not necessarily the best answer, but despite the order, because onload.js was calling first, it was not finishing first, so tippy was triggering (and hiding) the div before onload finished.

Thus to solve it, I made sure onload called tippy once it as done.

Ideally, there would be a way to still call and edit this without having to do this?