TippyJS:使用“交互式”设置渲染tippy使其(几乎)不可见

Question

我想创建一个带有按钮的Tippy：

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;
}

但是，一旦我将interactive标志设置为true，tippy的主体就消失了：

​

​

在读了一点之后，我首先认为我有一个zIndex问题，但显然不是这样。

Answer 1

事实证明，我没有读到纪录片中常见问题部分的一部分，其中提到添加appendTo: document.body可以解决问题，在我的案例中就是这样：

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}))
}