Provide an easy way to enable pointer events on tippy bubbles

Author: DonaldDuck313Created Apr 7, 2024Updated Jul 23, 2024

Labels💎 enhancement

Problem

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

javascript

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:

javascript

[...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:

javascript

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");

Source: atomiks/tippyjs

View original on GitHub View discussion on GitHub