Disable Tooltips on Touch Device

[avizuber-zz]

How would one disable tooltips in touch devices (tablets/phones)? I love using angular-ui bootstrap, but users on touch devices to click tooltip-enabled buttons twice (once to display the tooltip, next to take action). Hiding it using CSS and @media queries doesn't work because technically the tooltip is still there, it's just not visible. Any thoughts?

[dust4ngel]

i've had success here by configuring the tooltipProvider to return nothing when touch features are detected:

// configure the tooltipProvider
myApp.config(['$tooltipProvider', function ($tooltipProvider) {
var tooltipFactory = $tooltipProvider.$get[$tooltipProvider.$get.length - 1];

// decorate the tooltip getter
$tooltipProvider.$get = [
    '$window',
    '$compile',
    '$timeout',
    '$parse',
    '$document',
    '$position',
    '$interpolate',
    function ( $window, $compile, $timeout, $parse, $document, $position, $interpolate ) {
        // for touch devices, don't return tooltips
        if ('ontouchstart' in $window) {
            return function () {
                return {
                    compile: function () { }
                };
            };
        } else {
            // run the default behavior
            return tooltipFactory($window, $compile, $timeout, $parse, $document, $position, $interpolate);
        }
    }
];

}])

[AParks]

I've had success implementing this based on this part of the source code: "If the trigger option was passed to the $tooltipProvider.options method, it will use the mapped trigger from triggerMap." So I passed a dummy event that is called to show tooltips, but it doesn't do anything.

To detect if the device is a touch device, I used a user agent string parser like this library to get the device type, and made the assumption that if the device type is mobile or tablet, it's a touch device.

// configure the tooltipProvider
myApp.config(['$tooltipProvider', function ($tooltipProvider) {

    var parser = new UAParser();
    var result = parser.getResult();
    var touch = result.device && (result.device.type === 'tablet' || result.device.type === 'mobile');

    if (touch) {
        var options = {
            trigger: 'dontTrigger' // default dummy trigger event to show tooltips
        };

        $tooltipProvider.options(options);
    }

}]);

[avizuber-zz]

Thanks!

[BobbieBarker]

Looks like OP's question has been answered. Thanks to the community members who pitched in and helped him out.

[titobf]

@dust4ngel Thanks for sharing your solution. I actually needed to do it that way because I needed to inject the deviceDetector service so I can check for mobile devices by doing deviceDetector.isMobile().

[shuhei]

@AParks Thanks for your clever idea! It looks like we have none trigger for this purpose. https://angular-ui.github.io/bootstrap/#/triggers

[aslepiak]

@AParks I'm trying to get your solution to work, unfortunately I'm getting Uncaught Error: [$injector:modulerr] all the time.

Any idea, what i'm doing wrong?

[AParks]

@shuhei nice! I'm still using bootstrap version 0.12.1, which doesn't have that none option, but I will be sure to update this, once I can upgrade the version. :)

[AParks]

@aslepiak ah I bet it's because there was a syntax error! It should be

var options = {
    trigger: 'dontTrigger'; // default dummy trigger event to show tooltips
};

instead of

var options = {
    trigger = 'dontTrigger'; // default dummy trigger event to show tooltips
};

Sorry about that! I've updated the original post.

[shuhei]

@AParks @aslepiak I guess ; should be omitted:

var options = {
    trigger: 'dontTrigger' // default dummy trigger event to show tooltips
};

[aslepiak]

@AParks @shuhei
I finally managed to do it as I wanted:

app.config(['$uibTooltipProvider', function ($uibTooltipProvider) {
     var parser = new UAParser();
     var result = parser.getResult();
     var touch = result.device && (result.device.type === 'tablet' || result.device.type === 'mobile');
     if ( touch ){
         $uibTooltipProvider.options({trigger: 'dontTrigger'});
     } else {
         $uibTooltipProvider.options({trigger: 'mouseenter'});
    }
}]);

It's worth mentioning, that $tooltipProvider changed name to $uibTooltipProvider in the meantime.
Also, it won't work if you already have popover-trigger set in parent element.

It would be really nice, if we had an option to disable popovers on mobile, since:

Note to mobile developers: Please note that while popovers may work correctly on mobile devices (including tablets), we have made the decision to not officially support such a use-case because it does not make sense from a UX perspective.

Anyway big thanks to everyone posting in this thread (especially AParks). I'd never done this myself :)

[defields923]

@aslepiak 's solution no longer works. 'trigger' is not a property that can be globally configured, and neither is 'enable.' A very big disappointment for me, since it looks like I will have to add the tooltip-enable or tooltip-trigger attributes to every since use of the tooltip across the site. Does anyone have another global solution?