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

Solution 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.

Solution 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.

Solution 3

Main concept is that make popover manually on mobile device

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

Solution 4

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);
}

Solution 5

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

View more solutions

Comments

[Deepak Yadav]

Thanks a lot buddy! It really does the trick! works perfect on iOS devices

[Deepak Yadav]

I just noticed, that my Firefox is also getting detected as touch device by modernizr. hence getting touch icon all over the page

[Deepak Yadav]

fixes the issue on iOS device but affects the same functionality in Android !

[Deepak Yadav]

any idea why in your fiddle, after opening last popover, if you try clicking below *(just below the popover div) it to close it, the popover doesn't closes? - this issue happening with me after using your code

[tetiross]

in iOS when open tooltip and then close it by click somewhere outside, the only way to open closed tooltip again is to open another tooltip and then first one will be able to open

[scooterlord]

I've been designing for touch devices for ages... and wouldn't guess in a million years! mind blown. Thanks!