I have been using the latest version of the QTip2 library, 3.0.3. This library is no longer maintained, however, I want to upgrade my jQuery library, and QTip2 does not work with jQuery 3.6.
For example, the code below produces the error "jQuery.Deferred exception: elem.getClientRects is not a function TypeError: elem.getClientRects is not a function"
<table style='margin:100px'>
<tr>
<td id='table-cell'>
Hover over this
</td>
</tr>
</table>
<script>
target = jQuery('#table-cell')[0];
title = 'This is a test title';
jQuery(target).qtip({
content: {
title: title,
text: function(event, api) {
return "<div style='height:188px;width:382px;'>This is a test</div>"; // Set some initial text
},
button: true
},
position:{
my: 'left center',
at:'right center',
viewport: jQuery(window)
},
hide: {
delay: 200,
fixed: true
},
style: {
width: 400, // Overrides width set by CSS (but no max-width!)
height: 220, // Overrides height set by CSS (but no max-height!)
classes: 'qtip-dark qtip-zindex'
}
});
</script>
In QTip2, make the following change. In the PLUGINS.viewport function, change this:
viewportScroll = { left: fixed ? 0 : viewport.scrollLeft(), top: fixed ? 0 : viewport.scrollTop() };
viewportOffset = viewport.offset() || adjusted;
To this:
viewportScroll = { left: fixed ? 0 : viewport.scrollLeft(), top: fixed ? 0 : viewport.scrollTop() };
try
{
// QTip2 is trying to call getClientRects on window, producing error
viewportOffset = viewport.offset() || adjusted;
}
catch (e)
{
viewportOffset = { top: 0, left: 0 };
}