The tooltip can't be closed on iPhone

[davidhahn]

While the tooltip works fine on Android devices and Chrome's mobile simulator, when seen on an iPhone, the tooltip won't close unless the page is refreshed or another tooltip is selected.

I've tried setting the event=touch and doing showOn=touchstart and hideOn=touchend, that seems to be also buggy in that the first 'touch' sticks the tooltip and the 2nd triggers the close event, and the touches after that will show the tooltip while holding the touch and disappear when you let go of your finger.

i've created a repo to show different configs to try. Please try this on mobile and let me know if there's a way to hide the tooltip on iPhone.

https://github.com/davidhahn/ember-tooltips-mobile-test

[corrspt]

Added ember-tooltips to the project and it worked great (version 2.9.0) but also hit this situation :)

In any case, it's a great library.

[sir-dunxalot]

Sounds like this issue is still happening. I will do my best to look into it soon but will happily accept a PR and can provide assistance for anyone willing to dig into this issue (even if the goal is simply providing this thread with debug info).

[corrspt]

Hi @sir-dunxalot thanks for pitching in on this subject.

I'm definitely not an expert on IOS/Mobile Safari but what I think is happening is that IOS Safari is triggering NOT the "hide" event (being it the focus/mouseleave/etc...)

I've found a similar problems in other tooltip libraries (jqueryUI tooltip, hint.css and not surprisingly there are bug reports for them as well (hintcss) and (jqueryUi)).

Several of the topics I've found online refer to this MDN document about the click event and mobile safari.

I've found that Tippy.js doesn't seem to suffer from this problem on my iPhone SE (IOS 10.3). Bootstrap tooltips also seem ok.

Regarding bootstrap I did find these two pull requests (#22481 and #22483) that seem to deal with that situation (#22483 seems just to be removing an erroneous copy-paste from the #22481)

Here's the link for the tooltip.js file with the parts highlighted
Part 1
Part 2

This was the extent of my research, hope that it helps!

[sir-dunxalot]

You the man @corrspt! Thanks for the quick turnaround. From your info it sounds like this should be debuggable using a local build of the library and Safari Dev Tools. I will add this to my list to attempt for fix but since that is a long list of todos of course a PR or more help is welcome. I will keep this thread up-to-date either way.

[corrspt]

Thanks for the kind words @sir-dunxalot.

I did an experiment and I can reproduce/debug the issue with a local copy of the repository and the iPhone/iPad Simulator + Safari Devtools.

I tried out the solution that I mentioned from the bootstrap repository (in a very quick and dirty way). And it seems to work out, this is what I committed to a fork of mine

I basically updated the tether-tooltip-and-popover component to have in the didInsertElement hook the:

if ('ontouchstart' in document.documentElement) {
      $('body').children().on('mouseover', null, $.noop);
    }

and in the willDestroy:

if ('ontouchstart' in document.documentElement) {
        $('body').children().off('mouseover', null, $.noop);
      }

Now, naturally adding this trick on every "tooltip" instance seems to be a bad idea (also, I'm not trying to detected only IOS). But in any case, this is what I came up with, hope that it helps you to progress... I'm also open to the idea of disabling the tooltips on IOS/Mobile in general, as the user experience is not that great.

I've seen an issue on bootstrap in which they replaced tether by popper, don't know if that helped or not :)

In any case, thanks for being so quick to reply 👍

[BonBonSlick]

Still exists on iOS for BS 3

[sir-dunxalot]

Thanks for the report @BonBonSlick. I definitely want to fix this. To clarify, is BS bootstrap or your app or something else? And are you using an ember-tooltips stable 2.x release or a 3.x beta prerelease?

[sir-dunxalot]

@BonBonSlick Following up in case you can provide more info.

[BonBonSlick]

I have added some css dirty fixes.

/* Fix BS3 tooltip */
@supports (-webkit-overflow-scrolling: touch) {
  /* CSS specific to iOS devices */
  body {
    cursor: pointer;
  }
}

All packages installed and updated with npm / yarn

var $ = require('jquery');
require('bootstrap-sass');
require('select2');
require('slick-carousel');
require('raty-fa/lib/jquery.raty-fa.js');
require('./usertype-options.js');
require('./pretty-radiobutton.js');
require('./pretty-checkbox.js');


/* ========================================================================
 * Bootstrap: tooltip.js v3.3.7
 * http://getbootstrap.com/javascript/#tooltip
 * Inspired by the original jQuery.tipsy by Jason Frame
 * ========================================================================
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * ======================================================================== */

[PowerP]

does this issue still exist?
A reason to not use ember-tooltips...