qTip2 - anchor qTip to bottom of page (including when scrolled)

Question

I'm using a qTip2 tooltip to display a little notification at the bottom-left of the browser window when an update has occurred to certain elements on the page (so that the user is aware that a page save might be required to persist the change).

That was working reasonably well under my old test environment (Windows Vista, Firefox 52). However, with Windows 10 and Firefox Quantum (57.0.4), I'm seeing a console message which says:

This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning.

The warning links to a MDN page which talks about asynchronous scrolling, and indeed I'm now seeing a delayed qTip2 element-reposition when scrolling the page.

JSFiddle which demonstrates the issue - click the button and scroll the rendered context to see the effect.

I'd appreciate it if someone could recommend a solution that would eliminate the scroll/position-update delay. Thank you.

JSFiddle script:

<button id='mybutton'>Press me</button>
<div style='height: 1000px'></div>

function delay(ms)
{
  var d = $.Deferred();
  setTimeout(function()
  {
    d.resolve();
  }, ms);
  return d.promise();
}

function qTipHint(titleTxt, contentTxt, anchorElement, timeOut, topCenter)
{
  if (anchorElement.length > 0)
  {
    var locationMy = '';
    var locationAt = '';

    if (topCenter)
    {
      locationMy = 'top center';
      locationAt = 'bottom center';
    }
    else
    {
      locationMy = 'bottom left';
      locationAt = 'bottom left';
    }

    var test = anchorElement.qtip(
    {
      content:
      {
        text: contentTxt,
        title: titleTxt
      },
      show:
      {
        effect: function()
        {
          $(this).slideDown();
        }
      },
      hide:
      {
        event: '',
        effect: function()
        {
          $(this).slideUp();
        }
      },
      style:
      {
        classes: 'qtip-jtools',
        tip: false
      },
      position:
      {
        my: locationMy,
        at: locationAt,
        target: anchorElement
      }
    });

    var api = test.qtip('api');
    api.show();
    delay(timeOut).then(function()
    {
      api.destroy();
    });
  }
}

$('#mybutton').click(function()
{
  qTipHint('Title', 'Some hint text', $(window), 10000, false);
})

Answer 1

I've come to the conclusions I was trying to force the qTip2 library into a role for which it was not intended.

I've switched to Bootstrap Notify as an alternative, and it does a very satisfactory job.