TippyJS: Rendering a tippy with "interactive" set makes it (almost) invisble - popover

Question

I wanted to create a Tippy with a button in it:
let tippyActions = function() {
var tippys = document.querySelectorAll('*[id^="tippy"]');
tippys.forEach(tpy => tippy(tpy, {content: tippyContent(tpy),
placement: "left",
trigger: 'click',
allowHTML: true,
hideOnClick: false,
interactive: true,
//zIndex: 99999,}))
}
let tippyContent = function ( tpy) {
let buttonsDiv = document.createElement("div")
let btn1 = document.createElement("a")
btn1.href = `/go/${tpy.url}`
buttonsDiv.appendChild(btn1);
return buttonsDiv.innerHTML;
}
But as soon as I set the interactive flag to true the tippys body disappears:
After reading a bit I first thought I have a zIndex problem, but that apparently was not it.

Answer 1

Turns out that I missed to read a part of the FAQ section in the documentary, where it states that adding appendTo: document.body can solve the problem, which it did in my case:
let tippyActions = function() {
var tippys = document.querySelectorAll('*[id^="tippy"]');
tippys.forEach(tpy => tippy(tpy, {content: tippyContent(tpy),
placement: "left",
trigger: 'click',
allowHTML: true,
hideOnClick: false,
appendTo: document.body, // <---
interactive: true}))
}