Provide an easy way to enable pointer events on tippy bubbles

[DonaldDuck313]

Problem

I have a tippy bubble to which I've added a button:

const bubble = tippy("#someElement", {
    content: "<button id=\"myButton\">Click here</button>",
    allowHTML: true,
    showOnCreate: true,
    trigger: "manual",
    hideOnClick: false
});
document.querySelector("#myButton").onclick = () => alert("Do stuff");

The problem is that by default tippy bubbles have the CSS attribute pointer-events: none, so clicking the button does nothing. The only way I've found to get around this limitation is to manually select the bubble and change the CSS, which I find very ugly:

[...document.querySelectorAll("[data-tippy-root]")].at(-1).style.pointerEvents = "auto";

Solution

It would be nice if you could add an option to the tippy function that enables pointer events, so that I could do something like:

const bubble = tippy("#someElement", {
    content: "<button id=\"myButton\">Click here</button>",
    allowHTML: true,
    showOnCreate: true,
    trigger: "manual",
    hideOnClick: false,
    usePointerEvents: true    //Not currently possible, could you please add support for this?
});
document.querySelector("#myButton").onclick = () => alert("Do stuff");

[Ragnar-Oock]

you can use the interactive prop for that (see https://atomiks.github.io/tippyjs/v6/all-props/#interactive)