我正在使用jQuery qtip2创建鼠标悬停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"
}
});
});
当鼠标悬停在诸如此类的链接上时,这基本上会打开预览图像:
<a href="#" id="optionalProdsImgPreview_1">My great product here</a>
现在,我要做的就是当有人单击该链接时打开另一个qtip.同样,mouseover qtip也应该关闭.我是通过jquery .click还是通过其他方法做到这一点,或者qtip可以通过某种方式做到这一点?
谢谢
解决方法:
没关系.我自己想出了解决方案.
http://craigsworks.com/projects/qtip2/tutorials/advanced/#multi
这是我的完整代码:
$(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!"
}));
});