qTip2 with multiple show events does not work

Question

qTip2 works only on click when I specify more than one event. Mouseenter or focus alone works fine but I want to make sure it works on all events in case on mobile devices there is no mouseenter event.

$('span#message').qtip({
    content: {
        text: 'some text'
    },
    show: {
        event: 'click mouseenter focus'
    },
    hide: {
        event: 'click mouseleave blur'
    }
});

Answer 1

I came across the same problem and I was able to fix it by replacing following code in jquery.qtip.js:

PROTOTYPE._bindEvents = function(showEvents, hideEvents, showTargets, hideTargets, showCallback, hideCallback) {
    // Get tasrgets that lye within both
    var similarTargets = showTargets.filter( hideTargets ).add( hideTargets.filter(showTargets) ),
        toggleEvents = [];

    // If hide and show targets are the same...
    if(similarTargets.length) {

        // Filter identical show/hide events
        $.each(hideEvents, function(i, type) {
            var showIndex = $.inArray(type, showEvents);

            // Both events are identical, remove from both hide and show events
            // and append to toggleEvents
            showIndex > -1 && toggleEvents.push( showEvents.splice( showIndex, 1 )[0] );
        });

        // Toggle events are special case of identical show/hide events, which happen in sequence
        if(toggleEvents.length) {
            // Bind toggle events to the similar targets
            this._bind(similarTargets, toggleEvents, function(event) {
                var state = this.rendered ? this.tooltip[0].offsetWidth > 0 : false;
                (state ? hideCallback : showCallback).call(this, event);
            });

            // Remove the similar targets from the regular show/hide bindings
            showTargets = showTargets.not(similarTargets);
            hideTargets = hideTargets.not(similarTargets);
        }
    }

    // Apply show/hide/toggle events
    this._bind(showTargets, showEvents, showCallback);
    this._bind(hideTargets, hideEvents, hideCallback);
};

To:

PROTOTYPE._bindEvents = function(showEvents, hideEvents, showTargets, hideTargets, showCallback, hideCallback) {
    // Get tasrgets that lye within both
    var similarTargets = showTargets.filter( hideTargets ).add( hideTargets.filter(showTargets) ),
        toggleEvents = [];

    // If hide and show targets are the same...
    if(similarTargets.length) {

        // Filter identical show/hide events
        $.each(hideEvents, function(i, type) {
            var showIndex = $.inArray(type, showEvents);

            // Both events are identical, remove from both hide and show events
            // and append to toggleEvents
            showIndex > -1 && toggleEvents.push(type);
        });
        showEvents = showEvents.filter((el) => !toggleEvents.includes(el));
        hideEvents = hideEvents.filter((el) => !toggleEvents.includes(el));

        // Toggle events are special case of identical show/hide events, which happen in sequence
        if(toggleEvents.length) {
            // Bind toggle events to the similar targets
            this._bind(similarTargets, toggleEvents, function(event) {
                var state = this.rendered ? this.tooltip[0].offsetWidth > 0 : false;
                (state ? hideCallback : showCallback).call(this, event);
            });
        }
    }

    // Apply show/hide/toggle events
    this._bind(showTargets, showEvents, showCallback);
    this._bind(hideTargets, hideEvents, hideCallback);
};