Menu icon Foundation
dropdown double-tap in mobile

I am using a dropdown as an enhanced tooltip to display information when you roll-over an icon. It works fine in desktop, but you need to double-tap the icon for the dropdown to appear in mobile. If I remove the is_hover:true; then it works fine in mobile. What script do I need to add to make the hover on desktop become a one-touch event in mobile?

I am using the latest version - Foundation 5.5.1

Thanks

<td class="affiliate">
  <a data-dropdown="affiliate-1" aria-controls="affiliate-1" aria-expanded="false" data-options="align:right; is_hover:true; hover_timeout:5000"><img src="img/aff_badge.png" /></a>
  <div id="affiliate-1" class="f-dropdown content medium f-open-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1">
    <div class="tooltip-content-block">
      <h4>Headline</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci est natus distinctio repellendus</p>
      <div class="tooltip-content-section">
        <div class="tooltip-content-img"><img src="http://placehold.it/100x100"></div>
        <div class="tooltip-content-txt">
          <h5>Title #1</h5>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci est natus distinctio repellendus ratione aliquid maiores incidunt unde commodi consectetur nisi obcaecati perferendis perspiciatis fuga, qui blanditiis. Soluta, nisi velit.</span><span>Pariatur eos perspiciatis fuga quae, saepe,</p>
        </div>
      </div>
      <div class="tooltip-content-section">
        <div class="tooltip-content-img"><img src="http://placehold.it/100x100"></div>
        <div class="tooltip-content-txt">
          <h5>Title #2</h5>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci est natus distinctio repellendus ratione aliquid maiores incidunt unde commodi consectetur nisi obcaecati perferendis perspiciatis fuga, qui blanditiis. </p>
        </div>
      </div>
      <a href="#">Learn more</a>
    </div>
  </div>
</td>
            

         

dropdown

I am using a dropdown as an enhanced tooltip to display information when you roll-over an icon. It works fine in desktop, but you need to double-tap the icon for the dropdown to appear in mobile. If I remove the is_hover:true; then it works fine in mobile. What script do I need to add to make the hover on desktop become a one-touch event in mobile?

I am using the latest version - Foundation 5.5.1

Thanks

<td class="affiliate">
  <a data-dropdown="affiliate-1" aria-controls="affiliate-1" aria-expanded="false" data-options="align:right; is_hover:true; hover_timeout:5000"><img src="img/aff_badge.png" /></a>
  <div id="affiliate-1" class="f-dropdown content medium f-open-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1">
    <div class="tooltip-content-block">
      <h4>Headline</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci est natus distinctio repellendus</p>
      <div class="tooltip-content-section">
        <div class="tooltip-content-img"><img src="http://placehold.it/100x100"></div>
        <div class="tooltip-content-txt">
          <h5>Title #1</h5>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci est natus distinctio repellendus ratione aliquid maiores incidunt unde commodi consectetur nisi obcaecati perferendis perspiciatis fuga, qui blanditiis. Soluta, nisi velit.</span><span>Pariatur eos perspiciatis fuga quae, saepe,</p>
        </div>
      </div>
      <div class="tooltip-content-section">
        <div class="tooltip-content-img"><img src="http://placehold.it/100x100"></div>
        <div class="tooltip-content-txt">
          <h5>Title #2</h5>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci est natus distinctio repellendus ratione aliquid maiores incidunt unde commodi consectetur nisi obcaecati perferendis perspiciatis fuga, qui blanditiis. </p>
        </div>
      </div>
      <a href="#">Learn more</a>
    </div>
  </div>
</td>
            

         
Rafi Benkual almost 5 years ago

Can't reproduce this on the docs in the hover dropdown example on an Iphone 6. What device are you testing with? Are you loading modernizr?

P M almost 5 years ago

It only works with iPhone 6 Chrome. it doesn't work (needing a single-tap) on any other device/mobile browser. Yes, I am loading modernizr.

Javier Leal about 4 years ago

Hello. I have same issue with android. Does it has any solution?

Rafi Benkual about 4 years ago

Ok, tested with an Android and replicated. Can you open this issue on GitHub so we can have someone fix it? https://github.com/zurb/foundation