Integration - qTip2/qTip2 GitHub Wiki
qTip2 uses a method known as "lazy-loading", which basically means that it only creates your tooltips on demand, not on page load (unless prerender is true
!). This means the tooltip HTML, and therefore the contents of the tooltip, won't be available on $(document).ready()
, so .bind()
calls won't work! So...
If you're wanting to inject something dynamic into the tooltip content, say for example, add some fancybox links inside it, you'll need to nest your other plugin(s) initialisation within the render event callback
$('.selector').qtip({
content: $('.selector') // The content you are putting in your tooltip, with the other plugin needs access to,
events: {
render: function() {
// Grab the content
var content = api.elements.content;
// Now it's rendered, we can...
content.otherPlugin(); // ...Call our other plugins to act on its contents
$('a', content).otherPlugin(); // ...or a subset of its contents!
}
}
});
What about tooltips which use content within another plugin? I can't give exact details, because every plugin provides (or should anyway!) different callbacks, but basically you'll normally need to find an equivalent to qTip2's render callback, and nest your qTip call within it.
Isotope implements an old version of the imagesLoaded
plugin, which causes problems with qTip2. To solve this, simply re-include the latest imagesLoaded
script after the isotope
script.
<script src="/path/to/isotope.js"></script>
<script src="/path/to/jquery.qtip2.js"></script>
<script src="/path/to/imagesloaded.js"></script> <!-- Must be AFTER isotope -->
jQuery Validation plugin
$('form').validate({
errorPlacement: function(error, element) {
// qTip call
$(element).not('.valid').qtip();
},
success: function(error) {
// Hide tooltips on valid elements
setTimeout(function() {
myForm.find('.valid').qtip('hide');
}, 1);
}
});
$.jMonthCalendar.Initialize(
{
onEventBlockClick: function(event)
{
// qTip call
$(this).qtip();
}
}
, events);