![工具提示插件时]( "工具提示插件时")
本文介绍了使用 qtip jquery 工具提示插件时，屏幕上只有一个工具提示处于活动状态的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在页面上的多个元素(图像)上使用 jquery qtip 工具提示.我试图在特定时间在页面上只显示一个工具提示.如果显示了一个工具提示并且另一个工具提示被触发打开，则当前打开的实例应该关闭.我在文档中找到了这个并设置了 solo: true但是工具提示的多个实例仍然出现在页面上.这是我的 jquery:
$(document).ready(function () {//****** 工具提示 **********$('img.help').hover(function () {//销毁当前工具提示(如果存在)//if ($(this).data("qtip")) $(this).qtip("destroy");$(this)//将链接 HTML 设置为当前对角.qtip({内容:{text: '这是工具提示，最好使用图片的 alt 属性或在页面某处使用 html div 内容',标题: {text: '这个工具栏标题',按钮:'关闭'}},位置: {角落: {tooltip: 'bottomLeft',//使用角...target: 'topRight'//...和对角}},展示: {独奏:真的，when: false,//不指定表演事件ready: true//准备好时显示工具提示},hide: false,//不指定隐藏事件风格: {边界: {宽度:5，半径:10},填充:10，文本对齐:'左'，tip: true,//给它一个带有自动角点检测的语音气泡提示name: 'blue'//根据预设的 'cream' 样式设置样式//name: 'light'//根据预设的 'cream' 样式设置样式}});});});
html:
<div class="左子标签">参数
<div class="左帮助"><img src="images/help.png" class="help"/></div><div class="clear">
<div><div class="左子标签">视觉
<div class="左帮助"><img src="images/help.png" class="help"/></div><div class="clear">
解决方案
我猜测为什么即使您将 solo 设置为 true 它们仍然显示是因为 qtip 的所有实例都具有相同的类.在同一页面上处理多个工具提示时，我的 qtips 实例上总是有不同的类名，这种方式对我有用.
如果由于某种原因这不起作用，您可以尝试在 beforeShow api 方法中隐藏所有工具提示.
$('#tooltip').qtip({...接口:{beforeShow:函数(){$('img.help').qtip("隐藏");}}});
I am using the jquery qtip tooltip on multiple elements (images) on a page. I am trying to have only one tooltip appear on the page at a particular time. If a tooltip is shown and another tooltip has been triggered to open, the currently open instance should close. I have found this in the documentation and have set solo: true however multiple instances of the tooltip are still appearing ont the page. Here is my jquery:
<script type="text/javascript">
$(document).ready(function () {
//****** tooltips **********
$('img.help').hover(function () {
// Destroy currrent tooltip if present
//if ($(this).data("qtip")) $(this).qtip("destroy");
$(this) // Set the links HTML to the current opposite corner
.qtip({
content:
{
text: 'this is the tooltip, better to use the alt attribute of the image or use html div content somewhere on the page',
title: {
text: 'This toolip title',
button: 'Close'
}
},
position: {
corner: {
tooltip: 'bottomLeft', // Use the corner...
target: 'topRight' // ...and opposite corner
}
},
show: {
solo: true,
when: false, // Don't specify a show event
ready: true // Show the tooltip when ready
},
hide: false, // Don't specify a hide event
style: {
border: {
width: 5,
radius: 10
},
padding: 10,
textAlign: 'left',
tip: true, // Give it a speech bubble tip with automatic corner detection
name: 'blue' // Style it according to the preset 'cream' style
// name: 'light' // Style it according to the preset 'cream' style
}
});
});
});
html:
<div>
<div class="left sublabel">
Parameds</div>
<div class="left help">
<img src="images/help.png" class="help" /></div>
<div class="clear">
</div>
</div>
<div>
<div class="left sublabel">
Vision</div>
<div class="left help">
<img src="images/help.png" class="help" /></div>
<div class="clear">
</div>
</div>
解决方案
My guess as to why they are still showing even though you have solo set to true is because all the instances of the qtip have the same class. I have always had different class names on my qtips instances when dealing with multiple tooltips on the same page and that way has worked for me.
If that doesn't work for some reason you could try hiding all the tooltips in the beforeShow api method.
$('#tooltip').qtip({
...
api: {
beforeShow: function() {
$('img.help').qtip("hide");
}
}
});
这篇关于使用 qtip jquery 工具提示插件时，屏幕上只有一个工具提示处于活动状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！