Menu icon Foundation
Tooltip 5.3.0 on "a" tags confusion/bug?

Hello,

I am migrating from Foundation 4 to 5.
I am experiencing some difficulties to understand what is going wrong with my tooltips set on HTML anchor tags.

Here is the HTML I am working on :

<a class="assistance icon-menu has-tip tip-bottom" data-tooltip data-options="disable_for_touch:true" title="some title" href="http://foundation.zurb.com" target="_blank">my link text</a>

Issue:
When I use a smart phone and tap a link (see below for HTML) then the link won't open.

Tested on :
iPhone/Safari or Samsung Galaxy Note 2 / Android browser

What the docs say :
(http://foundation.zurb.com/docs/components/tooltips.html)
"Tooltips applied to "a" tags will automatically be disabled for touch events, so not to interfere with the link."

=> But it doesn't say that you should NOT use the option "disable_dor_touch:true" on "a" tags.

Solution ?
But when I look into the foundation.tooltip.js code, the section which I am interested in, is the following :

    events : function (instance) {
      var self = this,
          S = self.S;

      self.create(this.S(instance));

      $(this.scope)
        .off('.tooltip')
        .on('mouseenter.fndtn.tooltip mouseleave.fndtn.tooltip touchstart.fndtn.tooltip MSPointerDown.fndtn.tooltip',
          '[' + this.attr_name() + ']', function (e) {
          var $this = S(this),
              settings = $.extend({}, self.settings, self.data_options($this)),
              is_touch = false;

          if (Modernizr.touch && /touchstart|MSPointerDown/i.test(e.type) && S(e.target).is('a')) {
            return false;
          }        

         

At the end of these lines of code you can see that in the case that the element is an "a" tag and the event type is 'touchstart' then RETURN FALSE.
=> But in this case the mouseenter event is not triggered, and the link (href) is not opened.

When I change the last lines for the following (a simple "return;"), then it works properly. The touchstart does a simple "return", then the mouseenter is fired, the link is opened and the "mouseleave" is triggered :

          if (Modernizr.touch && /touchstart|MSPointerDown/i.test(e.type) && S(e.target).is('a')) {
            return;
          }

This way you can add or not the option disable_dor_touch:true on "A" tags, and it would work in any case !

Please let me know if this is the correct way to go, and if this could fixed in future versions ?

thank you

Yann

5.3.0tooltipdisable_for_touchsmartphone

Hello,

I am migrating from Foundation 4 to 5.
I am experiencing some difficulties to understand what is going wrong with my tooltips set on HTML anchor tags.

Here is the HTML I am working on :

<a class="assistance icon-menu has-tip tip-bottom" data-tooltip data-options="disable_for_touch:true" title="some title" href="http://foundation.zurb.com" target="_blank">my link text</a>

Issue:
When I use a smart phone and tap a link (see below for HTML) then the link won't open.

Tested on :
iPhone/Safari or Samsung Galaxy Note 2 / Android browser

What the docs say :
(http://foundation.zurb.com/docs/components/tooltips.html)
"Tooltips applied to "a" tags will automatically be disabled for touch events, so not to interfere with the link."

=> But it doesn't say that you should NOT use the option "disable_dor_touch:true" on "a" tags.

Solution ?
But when I look into the foundation.tooltip.js code, the section which I am interested in, is the following :

    events : function (instance) {
      var self = this,
          S = self.S;

      self.create(this.S(instance));

      $(this.scope)
        .off('.tooltip')
        .on('mouseenter.fndtn.tooltip mouseleave.fndtn.tooltip touchstart.fndtn.tooltip MSPointerDown.fndtn.tooltip',
          '[' + this.attr_name() + ']', function (e) {
          var $this = S(this),
              settings = $.extend({}, self.settings, self.data_options($this)),
              is_touch = false;

          if (Modernizr.touch && /touchstart|MSPointerDown/i.test(e.type) && S(e.target).is('a')) {
            return false;
          }        

         

At the end of these lines of code you can see that in the case that the element is an "a" tag and the event type is 'touchstart' then RETURN FALSE.
=> But in this case the mouseenter event is not triggered, and the link (href) is not opened.

When I change the last lines for the following (a simple "return;"), then it works properly. The touchstart does a simple "return", then the mouseenter is fired, the link is opened and the "mouseleave" is triggered :

          if (Modernizr.touch && /touchstart|MSPointerDown/i.test(e.type) && S(e.target).is('a')) {
            return;
          }

This way you can add or not the option disable_dor_touch:true on "A" tags, and it would work in any case !

Please let me know if this is the correct way to go, and if this could fixed in future versions ?

thank you

Yann

Ondřej Vašíček almost 4 years ago

I had the exactly the same problem and my conclusion was also the same (I edited the same line of code). But I’m a bit confused, that this is pretty big issue – everybody must see it, that the link doesn’t work, so I’m wondering, why it’s still not fixed or nobody says anything.
Anyway I’m giving +1 to this post and even after a long time asking Zurb, if this is the right solution and if it’ll we fixed.

Thanks Zurbians.