Version 3 broke my demo!

[sparky672]

Hi Caleb,

I figured I'd try version 3.0 of your plugin with jQuery Validate. Unfortunately, it's not working very well. Open the jsFiddle and immediately hit the submit button in the two test cases below to see the differences/problems.

Version 2.1 is working well: http://jsfiddle.net/2DUX2
With version 2.1, the tooltips update themselves without any flicker. Validation is triggered on every keyup but the tooltips remain solid.

Version 3.0 is not so good: http://jsfiddle.net/2DUX2/1/
With version 3.0, the tooltips flicker and flash when updating. With this, you can see the tooltip fade out/in on every keystroke.

As you can see I, even tried the new .tooltipster('content' ... method with the same result.

There are other new issues but those I only noticed in an older version of Firefox, so far.

Thank-you!

[louisameline]

Hello again sparky672,

Thank you for trying out 3.0 and reporting !

I'd rather say the plugin now works as expected, whereas it previously did not.

When you update your content, that is when you make a call to the content method (update is just a deprecated alias of content), an animation is played on the tooltip as expected. What you are expecting is Tooltipster to notice that you submit the same content everytime, so it would choose not to play the animation. But Tooltipster should not (and cannot, as far as jQuery objects are concerned) care about the content you provide : it is only your job to not call the content method when the tooltip does not need to be updated.

As for other new issues, please share them with us, I'd be happy to investigate.

To all readers : version 3.0 does contain improvements and fixes that may cause "breaking changes" to some use cases, make sure you read #98.

[louisameline]

And to improve the disappearance of the tooltip, I gave you the solution last time : do not update the content with an empty string, rather call the hide method.

[sparky672]

Quote @louisameline: "I gave you the solution last time : do not update the content with an empty string, rather call the hide method"

Not really sure what you're talking about. What "last time" with an "empty string"? Both of my jsFiddles already use the hide method when the tooltip needs to go. The last time I posted an issue it was about dynamically shifting the Tooltips on the page and the time before that was with Caleb @iamceege working on getting version 2.1 working with jQuery Validate.

Quote @louisameline: "I'd rather say the plugin now works as expected, whereas it previously did not."

Anyway, this is quite a conundrum now, since the jQuery Validate plugin is very popular and many people have been asking about using tooltips with it over on Stack Overflow. It already works with qTip2, although the qTip plugin has complex CSS issues, so I've been redirecting people to my solution using Tooltipster 2.1 which I find easier to use and more visually appealing.

Despite Tooltipster 3.0 now working "as expected", I see no other method for fully integrating it with the jQuery Validate plugin. The available callback functions fire on every keystroke by default. Disabling the onkeyup option would be a hacky/incomplete solution as fields with complex rules would need the messages to dynamically change.

I've investigated other available callback methods like highlight and unhighlight but with those, error is not an available argument to pass into these callback functions. The point is moot since these callbacks will also fire on every keystroke.

Are you interested in working with me on this? I'm not the developer of jQuery Validate plugin so I doubt we can expect to see any changes to that. However, I am the top user for the jQuery Validate plugin on Stack Overflow with nearly 700 answers so being able to get this working seems to be to your advantage as well as mine.

• Are we firing the "opening" animation simply when content changes on an already open tooltip? If so, can we have option to disable?
• Are we firing the "opening" animation upon show when the tooltip is already open? If so, maybe we shouldn't do this... check to see if already open and ignore multiple calls to show.

I'll tinker around a little with this more today and let you know if I find anything useful.

Thank-you!

[sparky672]

I should have looked closer at the available Tooltipster options.

It seems that the updateAnimation is the only problem here. Setting this option to false makes it work almost the same as in version 2.1 ... except that there is no animation when the content actually changes.

See: http://jsfiddle.net/2DUX2/2/

Can't the plugin simply check to see if the new incoming content is different than the existing content before triggering the animation on content update? I can also see this being useful for scenarios with other plugins, not just with jQuery Validate onkeyup.

[louisameline]

Oh sorry, someone asked a very similar question about jQuery Validate a few days ago, I thought it was you. Actually it was Alesnav : #82

There is nothing wrong with using jQuery Validate with Tooltipster 3.0, it's just that your snippet to make them work together should not make unnecessary calls to Tooltipster. Try this : http://jsfiddle.net/2DUX2/3/

If you are not happy with the animation between the "This field is required" and "Please enter a valid address" messages, you'll have to bind on the blur events of the element, or just disable the animation. Nothing wrong with Tooltipster anyway.

The show method does not trigger an update animation, only the content one.

As for your last question about checking if the content is identical to play an animation or not : we won't, because

• we technically can't because of the new features in Tooltipster concerning content as jquery objects
• some people will want to have the animation even when the content is identical anyway
• Tooltipster should not have to care about the content you provide. It just displays it, period. The contentAsHTML option is the only exception to that rule, mainly implemented for legacy reasons.

[sparky672]

That is a beautiful solution. Thank-you!

I will update my Stack Overflow answers accordingly.

[louisameline]

You're very welcome.