New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Twitter Bootstrap Popover/Tooltip Bug with Mobile #6232

Closed
mnapoli opened this Issue Dec 11, 2012 · 11 comments

Comments

Projects
None yet
8 participants
@mnapoli

mnapoli commented Dec 11, 2012

#3417 not reopened after all this time, so I created a new one.

http://jsfiddle.net/sy9Ff/

@Lechus

This comment has been minimized.

Lechus commented Dec 18, 2012

+1
:hover - can not close on iphone.

I am testing:

if (mobile)
        {
            $(".thumbnail").on("click", "",  function(event){
                $(this).mouseleave();
                event.stopPropagation();
            });
        }
@mdo

This comment has been minimized.

Member

mdo commented Dec 28, 2012

Don't rely on tooltips for mobile, and popovers should be done on click (the default as of a few versions ago).

@mdo mdo closed this Dec 28, 2012

@mnapoli

This comment has been minimized.

mnapoli commented Dec 28, 2012

@mdo Why are you closing this again -_-

Don't rely on tooltips for mobile

How do you do to enable tooltips only on mouse-less devices?? Basically you are closing the bug saying "Don't use tooltips if your website will be seen on mobiles".

I don't get why you closed it! Using the most simple example, tooltips and popovers are preventing buttons and links to work on touch devices:

<a class="example" title="Popover" href="/test">Test</a>​
$(".example").popover();

I am quoting myself:

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

Do you see the problem? Will you reopen the bug (or at leaste provide a real explanation?)

@fat

This comment has been minimized.

Member

fat commented Feb 6, 2013

@mnapoli relax.

if you want to disable the show functionality on mobile tooltips, you should be able to just listen to tooltips show events and prevent default… give that a shot and let me know if that helps

$(".elements-with-tooltips").on('show', function (e) {
  if ('ontouchstart' in document.documentElement) e.preventDefault()
})

Otherwise, you could also try asking in the mailing list.

This isn't really a bug, I'm sure you can get something working 👍

@fat fat closed this Feb 6, 2013

@kevinastone

This comment has been minimized.

kevinastone commented Feb 12, 2013

Why is this not a bug? Tooltips block the button click events on touch-enabled devices. That hardly can be expected behavior requiring a second click event to trigger the button.

This should be handled by the bootstrap tooltip plugin, I shouldn't have to patch the event handler.

@kevinastone

This comment has been minimized.

kevinastone commented Feb 12, 2013

I resolved this issue by checking for 'ontouchstart' in enter method. I would think this makes sense as a default.

  , enter: function (e) {
      if (this.options.trigger == 'hover' && 'ontouchstart' in document.documentElement) {
        // Block tooltip event on touch devices since it swallows click events
        return;
      }
      ...
@mnapoli

This comment has been minimized.

mnapoli commented Feb 13, 2013

@kevinastone +1, that's what I've been trying to say. Tooltips block links and buttons on touch devices, I fail to see how this is a feature.

But this issue keep getting closed so what can we say

@gsmethells

This comment has been minimized.

gsmethells commented Apr 26, 2013

We are writing an app that is intended to be used from either a Desktop browser or a Tablet browser. Tooltips do block links and buttons on touch devices. From a Desktop browser, everything works as expected. From a Tablet browser, the first click creates the tooltip and the second fires the button event.

I do not understand how you can say "do not use them" when many apps will target both platforms with a single code base. This is a bug as the behavior is not desirable.

@jaseemabid

This comment has been minimized.

jaseemabid commented Sep 25, 2013

Any update on this?

@DiscoverySquare

This comment has been minimized.

DiscoverySquare commented Mar 13, 2014

Once again @fat and @mdo collaborate to close an issue that everyone else is still saying is an issue. Virtually every issue I try to find an answer for I come across a thread that has been closed by those two with a long list of other people saying: "Listen to the logic of what we're ALL saying, THIS IS AN ISSUE!!!"

@mdo

This comment has been minimized.

Member

mdo commented Mar 14, 2014

@DiscoverySquare There's no need to be upset—this issue is a year old. Anything discussed here code-wise is likely wildly out of date as we've since released a major rewrite of the code base.

Beyond that, we're fully aware of some of the limitations we have right now with mobile and tooltips/plugins. In particular, there's some hairy situations with :hover and more. There's no easy fix here, but we're aware of them, and when we can, we'll fix them in the best way possible.

Until then, if there is a problem in the current version of Bootstrap that hasn't been addressed by @fat's earlier comment here, open a new issue. Cite this one, your reasons for opening a new one, include a JS Bin link if need be, and make your case.

<3

@twbs twbs locked and limited conversation to collaborators Jul 11, 2014

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.