javascript - qTip 问题 - 提示未显示，因为元素在脚本之后加载

Question

我对 javascript、jQuery 或它的插件不是很有经验，但通常我都能应付自如。无论如何，我的客户正在建立一个站点，其目的之一是从不同的站点获取新闻文章并在无序的 html 列表中显示标题。我无法访问他的代码，新闻文章加载速度相当慢(在网站加载后很久)。

我正在使用 qTIP，我的想法是，一旦您将鼠标悬停在新闻标题上，它就会生成一个工具提示。这在我的开发环境中工作正常，因为我有不是从任何地方生成的虚拟标题。

问题是，一旦客户在他的测试环境中设置站点，将新闻标题加载到列表中的脚本就会非常慢，以至于 qTIP 脚本在列表中有任何元素之前加载。因此它不知道任何 <li>从中获取并生成工具提示。

有没有办法确保在工具提示脚本之前加载所有新闻文章 负载？我认为加载脚本的简单延迟不是很明智，因为某些标题似乎比其他标题加载时间更长，因此延迟必须相当长。

Answer 1

在底部查看我的更新

我也一直在研究这个问题，并提出了一个类似于@Gaby 提供的解决方案。 @Gaby 的解决方案的问题在于它在鼠标悬停事件发生之前不会创建 qTip。这意味着您第一次将鼠标悬停时不会看到 qTip，但第二次会看到。此外，它会在您每次鼠标悬停时重新创建 qTip，这并不是最佳选择。

我采用的解决方案是这样的:

$("li").live('mouseover', function() {
    var target = $(this);
    if (target.data('qtip')) { return false; }
    target.qtip(...);
    target.trigger('mouseover');
});

这是它的作用:

• 将目标设置为 li 元素
• 如果该 li 元素已经有一个 qtip 则返回
• 如果 li 上没有 qtip，则对其应用 qtip
• 再次发送鼠标悬停触发器以激活 qtip

我知道这有点 hacky，但它似乎有效。另请注意 2.0 version of qTip should support live()作为一种选择。据我所知，current 2.0 development branch尚不支持它。

更新:

这是执行此操作的正确方法，直接来自论坛上的 qtip 开发人员本人:

$('selector').live('mouseover', function() {
   $(this).qtip({
      overwrite: false, // Make sure another tooltip can't overwrite this one without it being explicitly destroyed
      content: 'I\'m a live qTip', // comma was missing here
      show: {
         ready: true // Needed to make it show on first mouseover event
      }
   });
})

因此，它首先确保您不会在每次鼠标悬停时使用“overwrite: false”重新创建新的 qtips。然后它使用“show: {ready: true}”在第一次鼠标悬停时显示 qtip。