0

I have run into a weird issue with Chrome/Firefox (and other browsers) on Android touch screens. I am trying to open a jQuery UI tooltip with a click event. With Safari / Chrome on iOS (ie iPhone / iPad) it opens on the first click. Chrome/Firefox on Android requires a second click.

I tried just a basic click function:

$('.infoSectionTooltip').click(function () {
    $(".infoSectionTooltip").tooltip("open");
    alert('hey');
});

When I click on .infoSectionTooltip, the tooltip opens on iOS devicesand triggers the "hey" alert.

Android touch devices only triggers the "hey" alert and doesn't open the .infoSectionTooltip

Here is an example with my full code: https://jsfiddle.net/jshgL2r4/7/

The difference here is instead of just having it open, I added a class to the tooltip and am checking to see if that class exists so I know if I should open / close it.

Kater89
  • 93
  • 9
  • I think your answer is here: http://stackoverflow.com/questions/11397028/document-click-function-for-touch-device – SamA Dec 05 '16 at 18:08
  • I tried the two suggested solutions on the accepted answer: $(document).on('click touchstart', function () { -- this does open the tooltip right away but then closes it again without the user being able to read it. And $(document).on('click touch', function () { -- still makes the user double click. – Kater89 Dec 05 '16 at 21:17

0 Answers0