Question

在网站上使用jQuery工具提示时，它可以在所有浏览器上正常工作。但在移动专用iphone 6中它不能正常工作。点击它时工具提示已打开，但它没有关闭任何触摸事件。但是点击另一个工具提示之前一个是关闭的。请帮我解决这个问题。

Answer 1

我们遇到了同样的问题，特别是对于同时具有chrome和safari的iOS。我们添加了以下jQuery代码段。对于'click'事件不起作用，因此请确保该事件为'touchstart'。

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

Answer 2

在工具提示和body之间点击工具提示设置图层。在图层上单击关闭工具提示和图层。最后这对我有用

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.">

JQuery工具提示在iphone 6中没有关闭

2 个答案: