Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Twitter Bootstrap Popover/Tooltip Bug with Mobile? #3417

Closed
dennisgaudenzi opened this Issue · 16 comments

8 participants

@dennisgaudenzi

Hi there.

I posted this on Stack Overflow the other day (http://stackoverflow.com/questions/10483474/twitter-bootstrap-popover-tooltip-bug-with-mobile), but thought it might be better suited here. Here are the details:

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

@dennisgaudenzi

Sorry, code adjusted:

$(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')
        });   
    });
});

and

<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,

Dennis

@bensquire

+1

Dennis,

I am having a similar problem, but would rather the tooltips didn't appear on mobile touch devices (think iPhone). I am using them to help explain some icon-buttons, but they interfere with the actual click event.

Kind Regards
Ben

@dennisgaudenzi

Yeah, i can see what you mean. Another thing I just saw that I did not before is that PopOver will slide off the screen and out of view if they screen is small on iPhone. If you slide over to view it, it is literally off the screen. This should either be a setting to make sure it is always visible or pushes the left side over so you can see it. Again, seems like a default behavior that is not correct. Surprised to see a few issues with Bootstrap! It is pretty sweet overall though :)

@mnapoli

Same as @bensquire here, my buttons don't work on the first click because that click opens the popover/tooltip.

I wish those functionalities would be automatically disabled on touch screens (because tooltip and popovers are useless on them).

@dennisgaudenzi

I still think that they should simply change the default behavior to be touch to click open. I know it is a hassle if you already have an app that you manage the click handle, but at least this way, people can still see the tooltip and popover since they may be very important to the app in conveying info in "sticky" situations... ;) would love to hear from Twitter on this topic - no one even replied or acknowledged the bug/issue yet!!

@Karmak23

Hi,

I found a much simpler solution. Here is the code I use to setup popovers globally, and thus setup the superfluous click that will permit mobile devices to close the popover with click on the toggler button source:

        $('[rel="popover"]').popover().click(function(e) {
            $(this).popover('toggle');
        });

This will even not try to close other popovers. It assumes you have something like this in your page:

    <a class="btn" rel="popover" …>…</a>

wich is bootstrap documented way of setting up popovers.

I tested this on my iPad and on my ubuntu workstation.

regards,

@dennisgaudenzi

Great find - just tested on my app and it does seem to work if you click anywhere on the page. It does not close if you click the element that opened it (which I think that most people would expect to do to close it) but I agree that this is a better solution than above. If we could make it such that if you click the element that opened it to close it, that would be a sound and full soltuion to this issue - other than Twitter making it the default behavior, like it should be!

Thanks @Karmak23 - great work.

Dennis

@Karmak23

Re.

There must be something different in our respective codes, because in my webapp the popover closes when the <a class="btn"> is clicked again, either on the iPad or my Linux desktop. My solution should work the way you want! It is what I expected too in the first place.

Note that on the desktop the behaviour is "doubled": hover works as documented in bootstrap, and click works too. That doubled behavior doesn't disrupt me, because the "hover" comes instantly and I assume the user won't be tempted to click if the popover is already here. Even if it did, it would just close the popover, which is the expected behaviour anyway.

Note again that for pure clicked popovers (no hover), I use the "clickover" implementation from http://www.leecarmichael.com/bootstrapx-clickover/examples.html . Perhaps having the clickover JS alongside bootstrap made a modification on popover making my solution code work in my app. I didn't check, as I don't have time and need to concentrate on other things.

regards,

@dennisgaudenzi

Ah yes, I had another .click() is messing it up - just saw that. All fixed - works perfect. THANKS!

Dennis

@skinnybloke

Hi Karmak23 - I have added your code to my site for the popover which works fine but when I use similar code for the tooltip it makes no difference. Should it work for the tooltips as well?

jQuery('[rel="tooltip"]').tooltip().click(function(e) {
jQuery(this).tooltip('toggle');
});

@Karmak23

Sorry I didn't test the tooltips, I've got none on the webapp I'm working on. I will eventually update here if I ever use them, but I've no plan to do so in the very-near future. Reading the bootstrap related documentation, it should work the same.

Regards,

@dennisgaudenzi

This is working fine for me:

$(function () {
    $("tip").tooltip({
        placement: 'right'
        //Need to have this click check since the tooltip will not close on mobile
    }).click(function(e) {
        $(this).tooltip('toggle');
    });
});
@fat
Owner

Hey @dennisgaudenzi,

Thanks for opening this issue! Unfotunately, it looks like it fails to pass the tests neccessary for submitting to bootstrap. The following tests are currently failing:

  • should include a jsfiddle/jsbin illustrating the problem if tagged with js but not a feature

For a full list of issue filing guidelines, please refer to the bootstrap issue filing guidelines.

thanks!

@fat fat closed this
@mnapoli

This is 3 lines of code... there you go: http://jsfiddle.net/sy9Ff/

Will you reopen this bug or do we need to create a new one?

@johnantoni

this works my end:

$(document).ready(function() {
  $('[rel="popover"]').popover({
    "placement": "right",
    "trigger": "click"
  }).click(function(e) {
    e.preventDefault();
    $(this).popover('toggle');
  });
});
@wilsonf1

I tried that solution above but it's not cross device/browser. That fixes it (sufficiently) on the iPad, but now Chrome/Android is requiring you first focus on an element (i.e. a link), then clicking it to open the tooltip. So to the average user it looks broken! As soon as you start using "click" it solves the iPad issue, but creates new ones on the other devices. Can't believe it!

@mdo mdo locked and limited conversation to collaborators
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Something went wrong with that request. Please try again.