Twitter Bootstrap Popover/Tooltip Bug with Mobile?

Question

I am working with Twitter Bootstrap and ran into something I could not fix when testing on iPad and iPhone. On mobile (at least those devices) you need to click to engage the tip or popover (as expected). The issue is that you can never close it once you do. I added a listener to close it if you click it again, but I find it hard to believe that the default behavior would not be to click to remove it. Is this a bug in Bootstrap popover and tooltip?? My code is below - it seems to work, but ONLY if you click the same item that created the tip or popover - not anywhere on the page (could not get that to work).

Code to fire:

$(function () {
    //Remove the title bar (adjust the template)
    $(".Example").popover({ 
        offset: 10,
        animate: false,
        html: true,
        placement: 'top',
        template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><div class="popover-content"><p></p></div></div></div>'
        //<h3 class="popover-title"></h3>
        //Need to have this click check since the tooltip will not close on mobile
        }).click(function(e) {
            jQuery(document).one("click", function() {
                $('.Example').popover('hide')
        });   
    });
});

HTML:

<a href="javascript:void(0);" class="Example" rel="popover" data-content="This is the Data Content" data-original-title="This is the title (hidden in this example)">

Thanks in advance!

Dennis

Answer 1

I tried dozens of solutions posted to stackoverflow and other various corners of the web, and the following is the only one that worked for me!

Explanation

As noted here, you can a CSS-directive the element in order to make it touch-device-clickable. I can't tell you why that works or what's going on there, but that seems to be the case. So, I want to make the entire document aka body clickable on mobile devices, which will allow me to touch anywhere to dismiss the popover.

Popover JS

$(function () {
  $('[data-toggle="popover"]').popover({ trigger: "hover"}})
});

Directions

1. Install Modernizr

I'm using rails, so I used the gem.

gem 'modernizr-rails'

2. Create a touch class with a css-directive

Add the following to your CSS:

.touch {
  cursor: pointer
}

3. On touch devices only, add the touch class to the body

If you want other elements to be clickable, instead of the entire body, add the touch class to them.

if (Modernizr.touch) {
  $( "body" ).addClass( "touch" );
}

That's it! Now, you can use your popover normally on desktop (even with hover-trigger) and it will be touch-dismissible on mobile.

Answer 2

I had the same problem with my IPad. But in browser it works fine. Solution for me was adding listeners for all possible element that i can hide tooltip:

$('*').bind('touchend', function(e){
   if ($(e.target).attr('rel') !== 'tooltip' && ($('div.tooltip.in').length > 0)){
     $('[rel=tooltip]').mouseleave();
     e.stopPropagation();
   } else {
     $(e.target).mouseenter();
   }
});

Yes, it's small overhead to send event for all tooltips, but you can't define which element tooltip is showing.

Answer 3

Refer following code snippet to get it works:

$('[data-toggle="popover"]').popover();

$('body').on('click', function (e) {
  $('[data-toggle="popover"]').each(function () {
    //the 'is' for buttons that trigger popups
    //the 'has' for icons within a button that triggers a popup
    if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
      $(this).popover('hide');
    }
  });
});

This is the easiest way of detecting clicks on the body and close all the tooltips on the page.

You can check the live example here

Answer 4

Main concept is that make popover manually on mobile device

$(document).ready(function() {
    if ('ontouchstart' in window) {
        $('[data-toggle="popover"]').popover({
            'trigger': 'manual'
        });            
    }
});

Answer 5

Bootstap-tooltip v3.3.7

Actual: tooltip on hover doesn't work with touch devices in our project

Solution: Subscribe to tooltip's show event and call mouseenter

$body = $('body');

$body.tooltip({selector: '.js-tooltip'});

// fix for touch device.
if (Modernizr.touch) { // to detect you can use https://modernizr.com
  var hideTooltip = function(e) {
    tooltipClicked = !!$(e.target).closest('.tooltip').length;
    if (tooltipClicked) { return; }

    $('.js-tooltip').tooltip('hide');
  }
  var emulateClickOnTooltip = function(e) {
    tooltipsVisible = !!$('.tooltip.in').length;
    if (tooltipsVisible) { return; }

    $(e.target).mouseenter();
  }
  var onTooltipShow = function(e) {
    tooltipClicked = !!$(e.target).closest('.tooltip').length;
    if (tooltipClicked) { return; }

    $body.on('touchend', hideTooltip); 
  }
  var onTooltipHide = function() {
    $body.off('touchend', hideTooltip);
  }

  $body
    .on('touchend', '.js-tooltip', emulateClickOnTooltip)
    .on('show.bs.tooltip', onTooltipShow)
    .on('hide.bs.tooltip', onTooltipHide);
}

Answer 6

Solution on this jsfiddle, test on iOS (iPad and iPhone), Android and Windows.

$(document).ready(function(){

    var toolOptions;
    var toolOptions2;
    var isOS = /iPad|iPhone|iPod/.test(navigator.platform);
    var isAndroid = /(android)/i.test(navigator.userAgent);

    ///////////////////////////////////////// if OS
    if (isOS){

        toolOptions = {
            animation: false,
            placement:"bottom",
            container:"body"
        };
        $('.customtooltip').tooltip(toolOptions);

        $('.customtooltip').css( 'cursor', 'pointer' );
         $('body').on("touchstart", function(e){
            $(".customtooltip").each(function () {
                // hide any open tooltips when the anywhere else in the body is clicked
                if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.tooltip').has(e.target).length === 0) {
                    $(this).tooltip('hide');
                }////end if
            });
        });

    ///////////////////////////////////////// if Android
    } else if(isAndroid){
        toolOptions = {
            animation: false,
            placement:"bottom",
            container:"body"
        };
        toolOptions2 = {
            animation: false,
            placement:"left",
            container:"body"
        };
        $('.c_tool1').tooltip(toolOptions);
        $('.c_tool2').tooltip(toolOptions);
        $('.c_tool3').tooltip(toolOptions2);

    ///////////////////////////////////////// if another system
    } else {
        toolOptions = {
            animation: true,
            placement:"bottom",
            container:"body"
        };
        $('.customtooltip').tooltip(toolOptions);

    }//end if system

    document.getElementById("demo").innerHTML = "Sys: "+navigator.platform+" - isOS: "+isOS+" - isAndroid: "+isAndroid;

});

<h6>
    first <a href="#!" title="" class="customtooltip c_tool1" data-original-title="data del toolltip numero 1">tooltip</a> 
    Second <a href="#!" title="" class="customtooltip c_tool2" data-original-title="data del toolltip numero 2">tooltip</a> 
    third <a href="#!" title="" class="customtooltip c_tool3" data-original-title="data del toolltip numero 3">tooltip</a>
</h6>

<p id="demo"></p>