On hover div issue in ipad

Asked Sep 14 '16 at 14:22

Active Sep 14 '16 at 14:22

Viewed 18 times

I have done a css based tooltip and it's working great inn desktop. But when I test in ipad then it breaks.

In ipad, instead of hover it works on click which is fine and I can see the div is poped up.

But the question is how can I can close/remove/hide the box(without having a closing button as the main idea is to get the box on hover). I had a thought that if I touch somewhere in the screen then the box will be removed. But it doesn't work that way.

HTML code:

<div class="options">

  <label class="control control--checkbox info">Directional
    <input type="checkbox">
    <div class="control__indicator"></div>

    <div class="tooltip-container">
      <h4>Directional</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacus libero, accumsan sed magna vitae, suscipit tincidunt tellus. Maecenas ut purus interdum,

      </p>
    </div>
    <span class="infocon"></span>
  </label>

</div>

Here is a demo: https://jsfiddle.net/denc2hxt/

Any help is highly appreciated.

asked Sep 14 '16 at 14:22

Raj

1,377
6
23
48

Does this work as expected on any android device ? – Nikhil Nanjappa Sep 14 '16 at 14:28
Do you mind using jQuery? – AndrewLeonardi Sep 14 '16 at 14:28
@NikhilNanjappa Yes it works in Android device. – Raj Sep 14 '16 at 14:41
@AndrewLeonardi My first preference was to use pure css as I wanted to avoid jquery. – Raj Sep 14 '16 at 14:41
I assume this happens only in Safari right ? – Nikhil Nanjappa Sep 14 '16 at 14:51
Yes correct. Iphone/Ipad has default safari browser. – Raj Sep 14 '16 at 14:54
The answer is here : http://stackoverflow.com/questions/3705937/document-click-not-working-correctly-on-iphone-jquery – Raj Sep 14 '16 at 15:16

On hover div issue in ipad

0 Answers0