qTip的问题 - 提示不显示，因为元素在脚本后加载 [英] Problem with qTip - Tips not showing because elements load after the script
问题描述
我使用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被激活
我知道这个是有点黑客，但它似乎工作。另请注意， 2.0版本的qTip应支持live（）作为选项。据我所知，目前的2.0开发分支不'
更新：
这是正确的方法这个，直接来自qtip开发者自己在论坛上：
$（'selector'）。live（'mouseover'，function （）{
$（this）.qtip（{
覆盖：false，//确保另一个工具提示无法覆盖这个没有被明确销毁的工具提示
content：'I\ 'ma live qTip'，//逗号在这里丢失
显示：{
ready：true //需要使它显示在第一个mouseover事件
}
}）;
}）
所以它首先确保你不会重新创建新的qtips每个鼠标悬停覆盖：false。然后，使用show：{ready：true}的第一个鼠标悬停进行qtip显示。
I'm not very experienced with javascript, jQuery or it's plugins but usually I manage. Anyways, my client is building a site and one of its purposes is to pick up news articles from different sites and show the titles in unordered html lists. I don't have access to his code, the news articles load up rather slow(much after the site has loaded).
I'm using qTIP and the idea is that once you hover over a news title, it will generate a tooltip. This works fine in my dev environment, because I have dummy title's that are not generated from anywhere.
The problem is that once the client sets the site up in his test environment, the scripts that load the news titles into the lists are so slow, that the qTIP-script loads before there are any elements in the lists. Hence it's not aware of any <li>'s to pick up and generate tooltips from.
Is there a way make sure that ALL of the news articles are loaded before the tooltip-script loads? I think that a simple delay in loading the script is not very smart because some of the titles seem to take longer to load than others, so the delay would have to be rather long.
See my update at the bottom
I've been working on this problem as well, and came up with a solution similar to that provided by @Gaby. The problem with @Gaby's solution is that it doesn't create the qTip until the mouseover event has happened. This means that you won't see the qTip the first time you mouseover, but will the second time. Also, it will recreate the qTip every time you mouseover, which isn't exactly optimal.
The solution I went with is this:
$("li").live('mouseover', function() {
var target = $(this);
if (target.data('qtip')) { return false; }
target.qtip(...);
target.trigger('mouseover');
});
Here's what it does:
- Sets target to the li element
- Returns if that li element already has a qtip
- If no qtip on li, then applies qtip to it
- Sends mouseover trigger again so that qtip is activated
I know this is a bit hacky, but it seems to work. Also note that the 2.0 version of qTip should support live() as an option. As far as I can tell, the current 2.0 development branch doesn't yet support it.
UPDATE:
Here's the proper way to do this, direct from the qtip developer himself on the forums:
$('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
}
});
})
So it first makes sure that you don't recreate new qtips every mouseover with "overwrite: false". Then it makes the qtip show on the first mouseover with "show: {ready: true}".
这篇关于qTip的问题 - 提示不显示，因为元素在脚本后加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
