[英]jquery qtip2 - multiple qtips for same target?
I am using the jquery qtip2 to create a mouseover qtip..here is the code: 我正在使用jquery qtip2创建一个mouseover qtip ..这里有代码:
$(document).ready(function() {
$("#optionalProdsImgPreview_1").qtip({
content: "<img src='http://mysite.com/myimg.jpg' width='100' height='150' />",
show: {
solo: true
},
hide: {
delay: 400,
fixed: true,
event: "mouseout"
},
style: {
tip: {
corner: "rightMiddle"
},
classes: "ui-widget-content"
},
position: {
adjust: {
x: -18,
y: 0
},
at: "left center",
my: "right center"
}
});
});
This basically opens an preview image when the mouse is over a the link such as this: 当鼠标悬停在以下链接上时,这基本上会打开预览图像:
<a href="#" id="optionalProdsImgPreview_1">My great product here</a>
Now what I want to do is open a different qtip when someone clicks on that link. 现在我想要做的是当有人点击该链接时打开一个不同的qtip。 Also the mouseover qtip should close as well.
鼠标悬停qtip也应该关闭。 Do I just do that via jquery .click or should I do this via some other method or maybe qtip has some way of accomplishing this?
我是通过jquery .click做的,还是应该通过其他方法做到这一点,或者qtip有什么方法可以实现这一点?
Thanks 谢谢
Nevermind. 没关系。 I figured out the solution myself.
我自己想出了解决方案。
http://craigsworks.com/projects/qtip2/tutorials/advanced/#multi http://craigsworks.com/projects/qtip2/tutorials/advanced/#multi
Here is my full code: 这是我的完整代码:
$(document).ready(function() {
$("#optionalProdsImgPreview_1").qtip({
content: "<img src='http://mysite.com/myimg.jpg' width='100' height='150' />",
show: {
solo: true
},
hide: {
delay: 400,
fixed: true,
event: "mouseout"
},
style: {
tip: {
corner: "rightMiddle"
},
classes: "ui-widget-content"
},
position: {
adjust: {
x: -18,
y: 0
},
at: "left center",
my: "right center"
}
})
.removeData('qtip')
.qtip( $.extend({}, shared, {
content: "My New Content is HERE!"
}));
});
The solution may now have changed with the latest version of qTip2. 现在,解决方案可能已使用最新版本的qTip2进行了更改。 In order to get multiple qTips to work on the same target I had to add the overwrite:false option to the second qtip.
为了让多个qTips在同一个目标上工作,我必须在第二个qtip中添加overwrite:false选项。
http://qtip2.com/options#core.overwrite http://qtip2.com/options#core.overwrite
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.