How to work with Tippy.js 5.0.1?

[ryancwalsh]

Since you said

"If you find anything weird with RangeTouch, please let us know using the GitHub issues tracker and be descriptive on how to reproduce, expected result, the browser (and version) used, etc."

I figured I might as well report the problem I've been struggling with for the past few hours.

I have a simple range element like this: <input type="range" id="position" name="position" step="1" min="0" max="100" value="1" title="Rewind by clicking anywhere on this red slider" data-useDiffFromNow="false"/>

And this Tippy.js 5.0.1 code works on both desktop and mobile:

(function () {
    var $ = require('jquery');

    const tippy = require('tippy.js').default;//https://atomiks.github.io/tippyjs/ version 5.0.1 https://stackoverflow.com/a/57862794/470749 and https://github.com/atomiks/tippyjs/issues/596
    $(document).ready(function () {

        const selector = 'input[type="range"]';
        const tippySettings = {//https://atomiks.github.io/tippyjs/ version 5.0.1 https://atomiks.github.io/tippyjs/all-props/ and https://github.com/atomiks/tippyjs/issues/596
            animation: 'fade', //Default = "fade". Tippy 5.0.1 elements use a simple CSS fade transition by default. Extra animations need to be imported separately. https://atomiks.github.io/tippyjs/animations/
            arrow: true,
            content(reference) {
                const title = reference.getAttribute('title');
                reference.removeAttribute('title');
                return title;
            },
            delay: 0, //Delay in ms once a trigger event is fired before a tippy shows or hides.
            duration: [0, 1500], // Array [show, hide] Default is [275, 250]. Duration of the CSS transition animation in ms. Possibles values: number, [number, number] = [show, hide].
            
            inertia: true, //adds an elastic inertial effect to the tippy, which is a limited CSS-only way to mimic spring physics.
            onHide(instance) {
                console.log('hiding');
            },
            onShown(instance) {
                console.log('onShown');
            },  
            touch: true, //Default = true.  Determines if the tippy displays if the user is currently using touch input. Possible values: boolean, "hold", ["hold", number]. Use "hold" to use touch listeners instead, and e.g. ["hold", 500] to simulate "long press" behavior.
            trigger: "mouseenter focus click manual", //The events (each separated by a space) which cause a tippy to show. Possible values: "mouseenter", "focus", "click", "manual". "mouseenter focus click manual"
        };
        const el = document.querySelectorAll(selector);
        const instance = tippy(el, tippySettings);
     
    });
})();

But then if I try to add const range = new window.RangeTouch(selector);//v2.0.0 right after the tippy() line:

• desktop still behaves as expected (Tippy works)
• on mobile, the RangeTouch behavior is as expected
• but on mobile, the Tippy tooltip seems to display only about 1 out of 30 times, and I can't figure out what determines when it behaves as expected and why it almost never does.

I wonder if this issue isn't limited to a conflict with Tippy; I wonder if RangeTouch is preventing events from propagating in a way that they need to in order for other libraries to work?

Thanks for your library (I can't believe mobile browsers still haven't built in this functionality! 🤦), and thanks for you help.