Search code examples
popovertippyjs

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

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:

enter image description here

After reading a bit I first thought I have a zIndex problem, but that apparently was not it.

Solution

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