javascriptjqueryqtip2qtip

QTip2 doesn't work with jQuery 3.6 - elem.getClientRects is not a function


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>

Solution

  • 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 };
    }