Check for Touch device with Javascript

Question

I have 3 buttons with hover states which makes a little tooltip appear to describe the button. They work fine but on touchs screen they do not disappear after the user clicks on the button.

So I've tried a few js scripts for checking if a device is a touch device or not. They almost work but they also when I test on IE11 it also gets detected as a touch device. Chrome & Firefox do not get mistaken as a touch device.

Any sugestions?

Her is what I've tried

/*****************************
 TOUCH DEVICES HOVER FIX START
 ****************************/
// http://stackoverflow.com/a/4819886/1814446
function isTouchDevice() {
    return 'ontouchstart' in window // works on most browsers
        || 'onmsgesturechange' in window; // works on ie10
};

// http://www.stucox.com/blog/you-cant-detect-a-touchscreen/#poke-it
var hasTouch;
window.addEventListener('touchstart', function setHasTouch () {
    hasTouch = true;
    // Remove event listener once fired, otherwise it'll kill scrolling
    // performance
    window.removeEventListener('touchstart', setHasTouch);
}, false);

// https://github.com/Modernizr/Modernizr/blob/master/feature-detects/touchevents.js
define(['Modernizr', 'prefixes', 'testStyles'], function( Modernizr, prefixes, testStyles ) {
    // Chrome (desktop) used to lie about its support on this, but that has since been rectified: http://crbug.com/36415
    Modernizr.addTest('touchevents', function() {
        var bool;
        if(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
            bool = true;
        } else {
            var query = ['@media (',prefixes.join('touch-enabled),('),'heartz',')','{#modernizr{top:9px;position:absolute}}'].join('');
            testStyles(query, function( node ) {
                bool = node.offsetTop === 9;
            });
        }
        return bool;
    });
});

if(bool===true) {
    console.log('Touch Device'); //your logic for touch device
    jQ( "#btn-1, #btn-2, #btn-3" ).click(function() {
        jQ("#btn-1 .tooltip").css('opacity', '0');
        jQ("#btn-2 .tooltip").css('opacity', '0');
        jQ("#btn-3 .tooltip").css('opacity', '0');
    });
}
else {
    //your logic for non touch device
}

Answer 1

For IE10+ you can utilize "window.navigator.msMaxTouchPoints"

example code

function isIETouch ()
{
return window.navigator.msMaxTouchPoints == undefined ? false : window.navigator.msMaxTouchPoints;
}