Foundation-sites: Tooltip is not working on mobile devices, disabled touch and click

[MDOR]

Description

When the user clicks/tap a tooltip and is using/emulating a mobile device I can see the tooltip's message but he isn't not able to close it.

<span data-tooltip 
   aria-haspopup="true" class="has-tip left"  tabindex="4"
   data-disable-hover="false" 
   data-click-open="false" 
   data-disable-for-touch="true" 
title="Sometimes referred to as a homepage" >
  index
</span>

How to reproduce this bug:

1 - Open http://codepen.io/MDOR/pen/aWJOaj
2 - Open Chrome Developer Tools and set the emulator to responsive to 922 * 551 or less
3 - Click on the index item.

What should happen:

When the user clicks on the tooltip, It shouldn't display the content of the tooltip

What happened instead:

Displays the content of the tooltip and if you try to click again it doesn't disappear

Browser(s) and Device(s) tested on:

• Chrome 57.0.2987.133

Test case link:

• http://codepen.io/MDOR/pen/aWJOaj

[MDOR]

As far as I can see:
1 - The tooltip enter to 'focus.zf.tooltip' event, it hasn't reason to do it (I removed the handlers for touch and click handler, the only handler is the hover and mobile hasn't hover).
2 - Besides it enter to the 'focus.zf.tooltip' event, it never change the _this.isActive value to false, that's why it never hide the tooltip once is open.
3 - Debugging the code you'll see that we always run into the _this.show(); (line number 9781, at least in my example)

Thanks in advance, I hope this help :)

[Owlbertz]

Hi @MDOR, maybe I got this wrong, but there is no such option as data-disable-for-touch (see here for a list of possible options).
If you could rephrase what you are trying to achieve then we can see if there is a way to make it work as expected.

[MDOR]

Hi @Owlbertz , There is not an option into the documentation (the only option is supposed to be data-click-open), but please take a look to the next scenarios.

Removing the data-disable-for-touch property:

The property disableForTouch is false

Keeping the data-disable-for-touch=true property:

The property disableForTouch is true

The Tooltip takes the configuration from dataset, that is why the option is true when it has data-disable-for-touch=true in the DOM

[markadrake]

This thread is a little tough to interpret. :)

Going by the first couple of lines in the description - looks like the tooltip plugin isn't mobile / touch friendly. @MDOR either is confused on how to use it, or it's use doesn't work as intended.

@Owlbertz I know the documentation does not show a data attribute for touch, but the code shows that there is indeed a variable being checked for it. https://github.com/zurb/foundation-sites/blob/develop/js/foundation.tooltip.js#L289

[DanielRuf]

I got the same behavior on a real device and in the developer tools. Whe I click the tooltip content it closes. This is how it should work.

[DanielRuf]

disableForTouch is quite old and does not have any JSdoc comments.

https://github.com/zurb/foundation-sites/commit/91f6d3a3d35e05bc92137eeff1184f7ffd9e1b7d

Not redundant / obsolete as it seems:
https://codepen.io/DanielRuf/pen/NYWpKp

Should we add this to the docs?

[DanielRuf]

cc @ncoden

[ncoden]

The tooltip opening is triggered by mouseenter on touch devices. Mouse events must be disabled too by disableForTouch. @DanielRuf Do you want to take care of this of should I ?

[DanielRuf]

Would be glad if you can take a look. I'll check the other open issues and PRs that are left.

[ncoden]

Thanks. Please prioritize bugs over new features for v6.5 ;)