February 11, 2017

Bootstrap's tooltips on iOS require a double tap to activate

There's a problem with Bootstrap's tooltip plugin: when used on a smartphone, it requires a double tap to trigger an element it is attached to. For example, I had a tooltip added to a button. The first tap would show the tooltip, but to actually trigger the button I had to tap it one more time, and that wasn't obvious.

I searched for a solution online, and found a bug report closed by maintainers claiming that it wasn't an issue, and the solution was to not use the tooltips (?!).

Here's a workaround I ended up using:

jQuery(document).ready(function(){
jQuery("label[data-toggle=tooltip]").on('show.bs.tooltip', function (e) {
    if ('ontouchstart' in document.documentElement) {
        e.preventDefault();
    }
});

No comments: