Please Log-in or Register to get full access to the forums.


Post Reply 
 
Thread Rating:
  • 2 Votes - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[Solved] iPad: show:delay breaks qTip display
18th February, 22:10
Post: #1
[Solved] iPad: show:delay breaks qTip display
Craig:

Saw your twitter note about iPad compliance. Looks like you haven't had a chance to respond to my reply saying that I had one and would love to help you test, so thought I'd just start posting the bugs for you Smile Let me know if you'd prefer these done somewhere else, or in a different way.

So, for the first issue, here we go:

If a qTip initialization implements show:delay, the iPad will no longer display the tooltip before visiting the link. Instead, the browser will immediately begin loading the link and the qTip will (if the delay is complete before the page unloads) briefly flash up on the screen.

After a bit of experimentation, the only way I can seem to resolve this is to remove the show:delay completely for iOS.
Find all posts by this user
Quote this message in a reply
19th February, 16:04
Post: #2
RE: iPad: show:delay breaks qTip display
Hmm, does this occur regardless of the show.event?
Visit this user's website Find all posts by this user
Quote this message in a reply
19th February, 22:02 (This post was last modified: 19th February 22:02 by kiddailey.)
Post: #3
RE: iPad: show:delay breaks qTip display
Yes. I tested with click, mouseenter and mouseover. Here is the jsFiddle I'm using to test.

I should also mention that with the "click" event, if the anchor has a URL, it always goes to the URL regardless of whether on the iOS or not and the tooltip is not displayed. This is probably expected behavior, but thought I'd mention it.
Find all posts by this user
Quote this message in a reply
21st February, 10:37
Post: #4
RE: iPad: show:delay breaks qTip display
Yeah, you need to add a custom handler to prevent it following the link:

JS Code
$(elem).click(false); // 1.4.4 and above
$(elem).click(function(){ return false; }) // Older versions


Does that fix the issue?
Visit this user's website Find all posts by this user
Quote this message in a reply
21st February, 18:28
Post: #5
RE: iPad: show:delay breaks qTip display
It solves the click issue, but not the original show.delay problem on the iPad.
Find all posts by this user
Quote this message in a reply
22nd February, 00:06
Post: #6
RE: iPad: show:delay breaks qTip display
Hmm that's odd... can you test something out? Need to add an alert in to see if the render event is firing:

JS Code
// Define hoverIntent function
function hoverIntent(event) {
	function render() {
		// Add an alert here i.e. alert('test');
Visit this user's website Find all posts by this user
Quote this message in a reply
22nd February, 02:48
Post: #7
RE: iPad: show:delay breaks qTip display
I should have been more clear about what I meant, sorry:

* On links that have "#" as the href, the "click return false" does solve the browser jumping to the top of the page when the qTip is triggered via onclick and the show.delay works fine.

* On links that DO have a URL in the href (and that still need to work), the "click return false" causes the tip to display after show.delay, but the link also no longer works on iOS devices or the desktop.

So as you can see, the "click return false" doesn't really solve the show.delay bug.

When iOS detects a mouseover event, it basically turns links into a two-click process. The first touch causes the mouseover event to fire. The second touch then causes the browser to go to the URL.

The only fix I can think of is to ignore the show.delay setting on iOS completely, which I think might actually be better from a usability setting. Otherwise, it looks like the link is completely broken.

Does that make sense?
Find all posts by this user
Quote this message in a reply
23rd February, 00:26
Post: #8
RE: iPad: show:delay breaks qTip display
Oh I see, well you could do this in that case:

JS Code
$('.selector').qtip() // your qtip config here of course
	.bind('click', function() { return $(this).qtip().elements.tooltip.is(':visible') });


That way it will stop the link on first click, allowing it to show, but the second time it IS visible, so it will return true, allowing the link to work.
Visit this user's website Find all posts by this user
Quote this message in a reply
23rd February, 00:57
Post: #9
RE: [Solved] iPad: show:delay breaks qTip display
That would certainly work for iOS, but it still breaks the link for desktop users.

Right now, they can click the link before the show.delay has expired to go to the URL. If I did that, they'd have to click... wait for the tooltip, then click again.
Find all posts by this user
Quote this message in a reply
23rd February, 01:20
Post: #10
RE: [Solved] iPad: show:delay breaks qTip display
I'm afraid that's just something you'll have to take into consideration in your code by detecting iPad and adjusting it accordingly Sad

JS Code
$('.selector').qtip() // your qtip config here of course
	.bind('click', function() {
		var isiPad = navigator.userAgent.test(/something to match here/),
		return isiPad ? 
			$(this).qtip().elements.tooltip.is(':visible') :
			false; // Something different here...
	});
Visit this user's website Find all posts by this user
Quote this message in a reply
23rd February, 01:26 (This post was last modified: 23rd February 01:28 by kiddailey.)
Post: #11
RE: [Solved] iPad: show:delay breaks qTip display
I had a feeling you might say that.

It'd probably make sense to note in the documentation that show.delay is not compatible with iOS/touch devices then. Or mentioning at least about the extra steps that will be required if you want cross-device compliance.
Find all posts by this user
Quote this message in a reply
23rd February, 19:03
Post: #12
RE: [Solved] iPad: show:delay breaks qTip display
Done and done, linked to this thread for completions sake.
Visit this user's website Find all posts by this user
Quote this message in a reply
23rd February, 22:23
Post: #13
RE: [Solved] iPad: show:delay breaks qTip display
Just thought I'd post a follow-up with a slightly more graceful and less prone-to-errors/bugs solution for dealing with iOS devices and the show.delay bug.

Instead of messing with the click binding and potentially breaking something, I ended up just using a ternary in the qTip initialization to override the show options for iOS. For example:
JS Code
// Determine if client is an iOS device
var isiOS = navigator.userAgent.match(/(iPad)|(iPhone OS)/i) != null;
 
$('.selector').each(function()
	{
		$(this).qtip({
			.
			.
			.
			show: (!isiOS ? { delay: 1000 } : {}),
			.
			.
			.
		});
	});

Note that I am using the ternary for the entire show object and returning an empty object for iOS instead of just a delay value of zero. The reason is that simply including a delay setting, even if zero, will break the first touch mouseover event on iOS.

I don't have an Android device to test with, but assuming it treats mouseover events the same way and has the same issue with show.delay, you could easily expand this to cover that client simply by changing the userAgent detection string.

I'd prefer if qTip just ignored show.delay for iOS (since it's already detecting iOS anyway), but this at least works well and is simple enough to include in all your inits without too much effort.
Find all posts by this user
Quote this message in a reply
28th October, 13:55
Post: #14
Last Post
Does the freezing only happen after a certain amount of time, or just post game like before? Also is it restricted to when playing splitscreen?
Find all posts by this user
Quote this message in a reply
Post Reply 


Possibly Related Threads...
Thread: Author Replies: Views: Last Post
  How to display popup image of qtip outside of fancybox shantaram 0 37 11th January 14:04
Last Post: shantaram
  [Solved] qtip2 - show image on radio button ktpmm5 7 4,062 25th October 12:51
Last Post: NikosLed
  How to display an html page in qtip billyjoe 0 330 22nd June 21:48
Last Post: billyjoe
  HTML - display:none - content shift on mouseover FrankPrendergast 2 466 13th April 18:00
Last Post: FrankPrendergast
  all divs show TT except the one I actually want. daveschomburg 0 448 26th September 03:49
Last Post: daveschomburg
  Delay between owner element movement and qTip2 movement. shoor 0 1,191 16th May 16:20
Last Post: shoor
  Show Hidden Div and Anchor to Mouse on Element chrismacdonald 0 1,072 23rd November 17:31
Last Post: chrismacdonald
  Strange issue with fixed, delay flyboytyler 0 785 4th November 23:39
Last Post: flyboytyler
  bug? show and hide effects impact positioning? Darek 0 985 21st October 21:12
Last Post: Darek
  Show immediate on click or with delay on mouseenter vedmack 1 1,211 5th October 08:30
Last Post: vedmack



User(s) browsing this thread: 1 Guest(s)