jQuery Tooltip在iPhone 6中未关闭

Question

when using jQuery tooltip in website it is properly work on all browser.but in mobile specially iphone 6 it is not working proprly.when click on it tooltip is open but it is not close any touch event.but click another tooltip previous one is closed.so please guild me to fixed this issue.

this is the issue but not fixed

Answer 1

We had the same issue, specifically for iOS with both chrome and safari. We added the below jQuery snippet. It does not work for 'click' event hence make sure the event is 'touchstart'.

$('body').on('touchstart', function(e){
         $("div.tooltip").hide();
});

Answer 2

when click tooltip set over layer between tooltip and body.after over layer click close both tooltip and over layer.finally this is work for me

 jQuery( "#amount" ).tooltip(); jQuery('#amount').bind('touchstart' ,function(){ jQuery( "#amount" ).tooltip('open'); jQuery('#overlay').css('display', 'block'); }); jQuery('#overlay').bind('touchstart' ,function(){ jQuery('#overlay').css('display', 'none'); jQuery( "#amount" ).tooltip('close'); }); 

  #overlay{ display:none; position:absolute; top:0; left:0; width:100%; height:100%; z-index:1000; background-color:#333; opacity:.80; } #popup{ color: #333; display: none; position: absolute; top: 40%; left: 40%; width:200px; height: 200px; padding: 1em; border: 5px solid #333; background-color: white; text-align: left; z-index:1001; overflow: auto; font-size:16px; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.1/css/smoothness/jquery-ui.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.1/jquery-ui.js"></script> <input type="button" id="btn" value="Click Here" /> <div id="overlay"></div> <input id="amount" title="Please add.">