[英]Tooltipster suddenly not working
I've been dabbling with jQuery plugins for a site I'm building that requires tooltips. 我一直在为我正在构建的需要工具提示的网站使用jQuery插件。 The tooltips use AJAX to supply data when hovered and it was all working fine and dandy until I added a tooltip section for items. 在将鼠标悬停时,工具提示使用AJAX提供数据,并且一切正常,直到我为项目添加了工具提示部分。 After adding the code and saving, I noticed tooltips and some of the jQuery elements weren't working anymore (the xbbcode plugin also stopped working, but bootstrap, a color picker, and amplify still were working fine). 添加代码并保存后,我注意到工具提示和某些jQuery元素不再起作用(xbbcode插件也停止了工作,但是引导程序,颜色选择器和放大仍然可以正常工作)。
I went back and removed the code to see if I had done something wrong there but the error still persists! 我回去删除了代码,看看我在那儿做错了什么,但错误仍然存在! I didn't change anything else other than the additional tooltip so I don't understand why all of a sudden it won't work now. 除了附加的工具提示外,我没有进行任何其他更改,因此我不明白为什么突然之间现在不起作用。 Here is the code used, including the item tooltip I was trying to add (at the bottom targeting .item
). 这是使用的代码,包括我尝试添加的项目工具提示(在底部定位.item
)。
$(document).ready(function() {
// Retrieve stored data
var bannerData = amplify.store("banner");
var haData = amplify.store("ha");
var petData = amplify.store("pet");
if (bannerData === true) {
$('#banner').addClass('hidden');
$('#banner-collapse').text("Expand [+]");
}
if (haData === true) {
$('#ha').addClass('hidden');
$('#collapse-ha').text("Expand Avatar [+]");
}
if (petData === true) {
$('#pet').addClass('hidden');
$('#collapse-pet').text("Expand Pet [+]");
}
// Section collapse
$('#banner-collapse').click(function () {
if (bannerData === true) {
$('#banner').slideToggle(function () {
$(this).removeClass("hidden");
});
amplify.store("banner", null);
$(this).text(function(i, text) {
return text === "Expand [+]" ? "Collapse [-]" : "Expand [+]";
});
}
else {
$('#banner').slideToggle();
amplify.store("banner", true);
$(this).text(function (i, text) {
return text === "Collapse [-]" ? "Expand [+]" : "Collapse [-]";
});
}
});
// Avatar Collapse
$('#collapse-ha').click(function () {
if (haData === true) {
$('#ha').slideToggle(function () {
$(this).removeClass("hidden");
});
amplify.store("ha", null);
$(this).text(function(i, text) {
return text === "Expand Avatar [+]" ? "Collapse Avatar [-]" : "Expand Avatar [+]";
});
}
else {
$('#ha').slideToggle();
amplify.store("ha", true);
$(this).text(function (i, text) {
return text === "Collapse Avatar [-]" ? "Expand Avatar [+]" : "Collapse Avatar [-]";
});
}
});
// Pet Collapse
$('#collapse-pet').click(function () {
if (petData === true) {
$('#pet').slideToggle(function () {
$(this).removeClass("hidden");
});
amplify.store("pet", null);
$(this).text(function(i, text) {
return text === "Expand Pet [+]" ? "Collapse Pet [-]" : "Expand Pet [+]";
});
}
else {
$('#pet').slideToggle();
amplify.store("pet", true);
$(this).text(function (i, text) {
return text === "Collapse Pet [-]" ? "Expand Pet [+]" : "Collapse Pet [-]";
});
}
});
//Formats date
var now = moment().format("dddd, MMMM Do, <b>h:mm A</b>");
$('#date').append(now);
// Tooltips
$('.tooltip-ha').tooltipster({
animation: 'grow',
delay: 200,
trigger: 'hover',
position: 'right',
contentAsHTML: true,
functionInit: function(origin, content) {
// when the request has finished loading, we will change the tooltip's content
$.ajax({
type: 'GET',
url: '/haTooltip',
success: function(data) {
origin.tooltipster('content', data);
}
});
// this returned string will overwrite the content of the tooltip for the time being
return 'Wait while we load new content...';
}
});
$('.tooltip').tooltipster({
animation: 'grow',
delay: 200,
trigger: 'hover',
position: 'right',
contentAsHTML: true,
functionInit: function(origin, content) {
// when the request has finished loading, we will change the tooltip's content
$.ajax({
type: 'GET',
url: '/petTooltip',
success: function(data) {
origin.tooltipster('content', data);
}
});
// this returned string will overwrite the content of the tooltip for the time being
return 'Wait while we load new content...';
}
});
$('.item').tooltipster({
animation: 'grow',
delay: 200,
trigger: 'hover',
position: 'right',
contentAsHTML: true,
functionInit: function(origin, content) {
// when the request has finished loading, we will change the tooltip's content
$.ajax({
type: 'GET',
url: '/itemTooltip',
success: function(data) {
origin.tooltipster('content', data);
}
});
// this returned string will overwrite the content of the tooltip for the time being
return 'Wait while we load new content...';
}
});
});
I don't see any visible errors here, I had all my plugin scripts in one file and minified to minimize load time, but in trying to figure out why xbbcode and tooltipster suddenly don't work, I went ahead and redownloaded the separate versions. 我在这里看不到任何可见的错误,我将所有插件脚本都放在一个文件中,并进行了最小化以最大程度地减少加载时间,但是在试图弄清楚为什么xbbcode和tooltipster突然不起作用时,我继续进行并重新下载了单独的版本。 Normally in this case, I'd suspect some sort of compatibility error between tooltipster and xbbcode, but they had worked just fine before the item tooltip was added and when I temporarily removed xbbcode to see if the tooltips would start working again, the result was the same. 通常,在这种情况下,我怀疑工具提示和xbbcode之间存在某种兼容性错误,但是在添加工具提示项之前,它们工作得很好,当我临时删除xbbcode以查看工具提示是否可以再次开始工作时,结果是相同。
You have a few issues. 你有几个问题。
Regarding xbbcode 关于xbbcode
You seem to have removed the Javascript call to actually initialize XBBCODE. 您似乎已经删除了实际上初始化XBBCODE的Javascript调用。
Adding the below to your javascript will sort that out: 将以下内容添加到您的JavaScript中可以解决该问题:
$('.bbcode').each(function(){
var $this = $(this);
var myText = $this.html();
var result = XBBCODE.process({
text: myText
});
$this.html(result.html);
});
Regarding tooltipster 关于工具提示
$('.item').tooltipster({
content: 'Loading...',
updateAnimation: false,
functionBefore: function(origin, continueTooltip) {
continueTooltip();
if (origin.data('ajax') !== 'cached') {
// when the request has finished loading, we will change the tooltip's content
$.ajax({
type: 'POST',
url: 'http://dodsoftware.com/sotests/xbbcode/itemTooltip', // change to your file location
success: function(data) {
origin.tooltipster('content', data);
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
origin.data('ajax', 'cached');
}
}
});
My uneducated is that the objects with the class "item" are not valid for tooltips. 我没有受过教育,认为带有“ item”类的对象对工具提示无效。
I would be able to make a better guess if I knew the HTML code. 如果我知道HTML代码,我将能够做出更好的猜测。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.