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

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

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

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

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

请参阅底部我的更新

我也一直在研究这个问题，并提出了类似于@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版本的qTip应该支持live()作为一个选项。据我所知，当前2.0开发分支尚不支持。

UPDATE:

以下是执行此操作的正确方法，直接来自论坛上的 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”重新创建新的 qtip。然后它使 qtip 在第一次鼠标悬停时显示“show: {ready: true}”。