Tippy JS：渲染带有 "interactive" 集的 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，tippys body 就会消失：

读了一点之后，我首先想到我有一个 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}))
}

Tippy JS：渲染带有 "interactive" 集的 tippy 使其（几乎）不可见

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

popover

tippyjs