Button Tap Activated with Finger-sliding Motion

[Hydra9268]

Bug description

After implementing Tippy.js, a coworker demonstrated a problem: they tapped a button to show the tooltip, then slid their finger to the following button, which activated that button's tooltip.

Reproduction

Steps to reproduce.

1. Create or visit a page with a row of buttons and Tippy.js tooltips implemented with a click trigger.
2. View the page through a mobile browser (my coworker used Chrome in her demonstration).
3. Tap a button to show its tooltip, then slide your finger to another button.
4. Observe that there are two visible tooltips.

Code

document.addEventListener('DOMContentLoaded', function() {
    function GetContent() {
        let content = `content here`;
        if (window.matchMedia('(max-width: 800px)').matches) {
            content += '<a class="remodal-close cursor-pointer" style="position: absolute; top: 10px; right: 15px;"><i class="fal fa-times fa-2x"></i></a>';
        }
        if ($('.tip9336').hasClass('unavailable-option')) {
            content += '<br /><cite>Choose a different combination</cite>';
        }
        return content;
    }

    function GetWidth() {
        let maxWidth = 500;
        if ($('.tip9336').hasClass('unavailable-option')) {
            maxWidth = 300;
        }
        return maxWidth;
    }

    if (window.matchMedia('(max-width: 800px)').matches) {
        tippy('.tip9336', {
            content: GetContent,
            width: GetWidth,
            maxWidth: 'none',
            theme: 'light',
            allowHTML: true,
            interactive: true,
            trigger: 'click',
        });

        function TippyCloseButton() {
            document.querySelector('[data-tippy-root] .tippy-box .remodal-close').addEventListener('click', () => {
                tippy.hideAll();
                document.querySelector('[data-tippy-root]').remove();
            });
        }

        DOMChange('[data-tippy-root] .tippy-box', TippyCloseButton);
    } else {
        tippy('.tip9336', {
            content: GetContent,
            width: GetWidth,
            maxWidth: 'none',
            theme: 'light',
            allowHTML: true,
            interactive: true,
        });
    }
});