Tooltipster不能正常工作的开始 [英] Tooltipster not working properly in the beginning
问题描述
我现在用的是tooltipster插件工具，在那里我得到画了一些TD给定id甘特图。因此，这曾经ID定义和鼠标时会得到AJAX数据显示accordingly.Below是我的codeS的片段。这里的问题是，工具提示只出现几次，我的鼠标的TD之后。此后，工作正常。我可以看到我在调试窗口中的AJAX页面调用，也看到这个错误
Tooltipster：一个或多个工具提示已经连接到这个元素：忽略。使用多个选项，附加更多的提示。 jquery.tooltipster.min.js：1
$（文件）。就绪（函数（）{
$（'TD [ID]）。tooltipster（{
//内容：正在载入......，
functionBefore：功能（产地，continueTooltip）{
//我们会让这个功能异步的，允许工具提示继续前进，显示加载的通知，同时获取我们的数据
continueTooltip（）;
变种idval = 0;
//接下来，我们要检查我们的数据已经被缓存
//如果（origin.data（AJAX）！=='缓冲'）{
$阿贾克斯（{
键入：GET，
网址：getDetails.php，
数据：idval，
成功：功能（数据）{
//我们返回的数据，并将它缓存更新我们的提示内容
//警报（数据是：+数据）;
VAR FinalData的='总数据：300℃; BR＆GT;共完成200';
//警报（数据）;
//origin.tooltipster：$（'！＆LT;跨度＆GT; testst＆LT;强＆gt;这文本以粗体显示的情况下和LT; / STRONG＆GT;＆LT; / SPAN＆GT;'）
origin.tooltipster（{
内容：FinalData的，
多：真，
contentAsHTML：真
}）;
//origin.tooltipster({content：数据，contentAsHTML：真}）的数据（AJAX，缓存）。
}
}）;
//}
}
}）;
}）;
在Tooltipster插件真的应该前，所有这一切都被初始化。使用的mouseenter 输入来触发它的初始化每次在用户悬停的一个＆LT; TD＆GT; 元素不是伟大实践是问题的根源您的问题。理想情况下，你会想要把它分解成以下内容：
- 找到你的
＆LT; TD＆GT;元素的与的ID的定义 - 应用tooltipster这些元素。
- 让tooltipster从那里搞定一切。
1。寻找你的＆LT; TD＆GT; 元素
使用jQuery的魔力，你可以巧妙地利用选择的，而不是查询一个更大的集与你的最初实现取这些，从答案中收集的计算器内螺纹在这里，的 jQuery的只得到所有的HTML元素的ID 中，我们得到：
$（'TD [ID]）
这将获取你所有的＆LT; TD＆GT; 元素定义一个id，予以警告，如果你有一个广泛的表，这可能是有点慢。另外，您可以选择，然后应用过滤器来缩小您的设置：
$（'TD'）。过滤器（功能（）{
返回$（这）.attr（'身份证'）==未定义！;
}）;
双方将基本上做同样的！
2。施加tooltipster这些元素
我没有做了很多工作在这里，因为你有很多的注释掉code，所以我已经把它一样，有一些小的调整，这里是我的版本的工作code
$（'TD [ID]）。tooltipster（{
//内容：正在载入......，
functionBefore：功能（产地，continueTooltip）{
//我们会让这个功能异步的，允许工具提示继续前进，显示加载的通知，同时获取我们的数据
continueTooltip（）;
//接下来，我们要检查我们的数据已经被缓存
//如果（origin.data（AJAX）！=='缓冲'）{
$阿贾克斯（{
键入：GET，
网址：getDetails.php，
数据：$（本）.attr（'身份证'），
成功：功能（数据）{
//我们返回的数据，并将它缓存更新我们的提示内容
//警报（数据是：+数据）;
VAR FinalData的='总数据：300℃; BR＆GT;共完成200';
//警报（数据）;
//origin.tooltipster：$（'！＆LT;跨度＆GT; testst＆LT;强＆gt;这文本以粗体显示的情况下和LT; / STRONG＆GT;＆LT; / SPAN＆GT;'）
origin.tooltipster（{
内容：FinalData的，
多：真，
contentAsHTML：真
}）;
//origin.tooltipster({content：数据，contentAsHTML：真}）的数据（AJAX，缓存）。
}
}）;
//}
}
}）;
3。让tooltipster处理一切从这里
Tooltipster默认情况下，鼠标悬停在一个元素时触发（intialised时），这意味着你的 functionBefore 此悬停事件之前将运行，从而导致你的AJAX请求每次运行，没有必要更此后做任何事情：D
我希望这有助于！ ：）
I am using the tooltipster plugin tool where I got gantt chart drawn with some td given id. So which ever id is defined and the mouse over it will get ajax data and show accordingly.Below is snippet of my codes. Issue here is that the tool tip only appear after few times I mouse the td. Thereafter it works fine. I can see the in my debug window the ajax page is called and also see this error
Tooltipster: one or more tooltips are already attached to this element: ignoring. Use the "multiple" option to attach more tooltips. jquery.tooltipster.min.js:1
$(document).ready(function () {
$('td[id]').tooltipster({
// content: 'Loading...',
functionBefore: function(origin, continueTooltip) {
// We'll make this function asynchronous and allow the tooltip to go ahead and show the loading notification while fetching our data
continueTooltip();
var idval=0;
// Next, we want to check if our data has already been cached
//if (origin.data('ajax') !== 'cached') {
$.ajax({
type: 'GET',
url: 'getDetails.php',
data:idval,
success: function(data) {
// Update our tooltip content with our returned data and cache it
//alert("Data is : "+data);
var finalData = 'Total Data : 300 <br> Total Completed : 200';
//alert("DATA");
//origin.tooltipster: $('<span>testst<strong>This text is in bold case !</strong></span>')
origin.tooltipster({
content: finalData,
multiple: true,
contentAsHTML: true
});
//origin.tooltipster({content: data,contentAsHTML: true}).data('ajax', 'cached');
}
});
//}
}
});
});
The Tooltipster plugin really should be initialised before all of this. Using the mouseenter enter to trigger it's initialisation every time a user hover's over a <td> element is not great practice and is the root problem to your issue. Ideally you would want to break it down into the following:
- Find your
<td>elements with id's defined. - Apply tooltipster to these elements.
- Let tooltipster handle everything from there.
1. Finding your <td> elements
With the magic of jQuery you can fetch these with a clever use of selectors rather than querying a larger set with your initial implementation, gathered from the answers within the StackOverflow thread here, jquery get only all html elements with ids, we get:
$('td[id]')
This will fetch you all <td> elements with an id defined, be warned this could be a bit slow if you have an extensive table. Alternatively you can select, then apply a filter to narrow down your set:
$('td').filter(function(){
return $(this).attr('id') !== undefined;
});
Both will essentially do the same!
2. Applying tooltipster to these elements
I've not done much here since you had a lot of commented out code, so I've kept it the same, with some minor tweaks, here is my version of the "working code":
$('td[id]').tooltipster({
// content: 'Loading...',
functionBefore: function(origin, continueTooltip) {
// We'll make this function asynchronous and allow the tooltip to go ahead and show the loading notification while fetching our data
continueTooltip();
// Next, we want to check if our data has already been cached
//if (origin.data('ajax') !== 'cached') {
$.ajax({
type: 'GET',
url: 'getDetails.php',
data: $(this).attr('id'),
success: function(data) {
// Update our tooltip content with our returned data and cache it
//alert("Data is : "+data);
var finalData = 'Total Data : 300 <br> Total Completed : 200';
//alert("DATA");
//origin.tooltipster: $('<span>testst<strong>This text is in bold case !</strong></span>')
origin.tooltipster({
content: finalData,
multiple: true,
contentAsHTML: true
});
//origin.tooltipster({content: data,contentAsHTML: true}).data('ajax', 'cached');
}
});
//}
}
});
3. Letting tooltipster handle everything from here
Tooltipster (when intialised) is triggered by default when hovering over an element, this means your functionBefore will be run before this "hover" event, causing your AJAX request to be run each time, there is no need to do anything more thereafter :D
I hope this helps! :)
这篇关于Tooltipster不能正常工作的开始的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
