Use Bootstrap tooltips only if touch events are supported?

Question

I'm using Bootstrap tooltips on my site:

$('body').tooltip({
  selector: '.help, .searchicons li, .user-prefs, .colour'
});

The only problem is that they don't work brilliantly on touch devices, when they are attached to elements that also have specific touch events attached.

Is there a way that I can disable them on touch elements?

Answer 1

You can detect for touch capability and then only create the tooltip if touch is not enabled.

var is_touch_device = 'ontouchstart' in document.documentElement;

if (!is_touch_device) {
    $('body').tooltip({
        selector: '.help, .searchicons li, .user-prefs, .colour'
    });
}