Question

我正在使用qTip2工具提示在页面上的某些元素发生更新时在浏览器窗口的左下方显示一些通知（以便用户知道可能需要页面保存坚持改变）。

在我的旧测试环境（Windows Vista，Firefox 52）下，这种方法运行得相当好。但是，对于Windows 10和Firefox Quantum（57.0.4），我看到一条控制台消息说：

此网站似乎使用滚动链接定位效果。这可能异步平移不能很好地工作。

警告链接到MDN page，讨论异步滚动，实际上我现在看到滚动页面时延迟的qTip2元素重新定位。

JSFiddle which demonstrates the issue - 单击按钮并滚动渲染的上下文以查看效果。

如果有人可以推荐一种能够消除滚动/位置更新延迟的解决方案，我会很感激。谢谢。

JSFiddle脚本：

<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

我得出的结论是我试图强制qTip2库成为一个不适合它的角色。

我已经切换到Bootstrap Notify作为替代方案，并且它的工作非常令人满意。

qTip2 - 将qTip锚定到页面底部（包括滚动时）

1 个答案: