How to make Tippy.js use existing element

Question

I am writing an app where I use Tippy.js to create popups. My HTML code looks like this:

<popup-target popup-id="1">...</popup-target>
...
<popup-content popup-id="1">
    <!-- This content is live -->
</popup-content>

To initialize Tippy.js, I use the following code:

tippy(target, 
{
    content(reference) { return document.querySelector("popup-content[popup-id=\"" + identity + "\"]").innerHTML; },
...
}

As you can see, I retrieve the innerHTML of the popup-content element. This means that any updates made to the popup-content element will not affect the popup. I would like to set up Tippy.js so that it positions the <popup-content ..> without detaching it from the DOM.

I have tried to return Element (not string), and specify appendTo -> body, but Tippy takes the Element and detaches from the DOM, which is undesired because I can not update the popup while it is hidden.

Answer 1

I don't know if I understand what you ask correctly, but I'm quite sure an element can only be attached to a single parentElement (and DOM) at any given time.

Would it be possible for you to use something like document.querySelectorAll('popup-content').forEach(instance => {...}) or for(const instance of document.querySelectorAll('popup-content')) ... to update all instances the same way?