jQuery 工具提示 onClick？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7941931/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery tooltip onClick?
提问by Charlie
I have been looking for a long time now and can't seem to find a jQuery tooltip plugin that utilizes the following:
我一直在寻找很长时间，但似乎找不到使用以下内容的 jQuery 工具提示插件：
onClick(Instead of hover, making it work like a toggle button)
Fade In/Fade Out
onClick（而不是hover，使其像切换按钮一样工作）
淡入/淡出
The idea for using tooltips is that I have a few links which I want to display content in. While normal tooltips (this is probably where I went wrong..) are for hovering, it needed to be one that was toggled by clicking on the link triggering it.
使用工具提示的想法是我有一些我想在其中显示内容的链接。虽然正常的工具提示（这可能是我出错的地方......）用于悬停，但它需要是通过单击链接触发它。
Are there better ideas for this than using a tooltip?
有没有比使用工具提示更好的想法？
回答by Brunner
I don't know how you've been looking but a quick google search for jquery tooltip gave me http://flowplayer.org/tools/tooltip/index.html(been using their scrollable plugin for some time now, really like it :)
我不知道你一直在看什么，但是快速谷歌搜索 jquery 工具提示给了我 http://flowplayer.org/tools/tooltip/index.html（现在已经使用他们的可滚动插件有一段时间了，真的很喜欢它:)
from their site:
从他们的网站：
jQuery Tooltip allows you to fully control when the tooltip will be shown or hidden. You can specify different events for different types of elements. You can control this behaviour with the events configuration variable which has following values by default:
jQuery Tooltip 允许您完全控制工具提示何时显示或隐藏。您可以为不同类型的元素指定不同的事件。您可以使用 events 配置变量控制此行为，默认情况下该变量具有以下值：
events: {
def: "mouseenter,mouseleave", // default show/hide events for an element
input: "focus,blur", // for all input elements
widget: "focus mouseenter,blur mouseleave", // select, checkbox, radio, button
tooltip: "mouseenter,mouseleave" // the tooltip element
}
using 'click' should do the trick. (I didn't test it)
使用“点击”应该可以解决问题。（我没有测试）
however, if all else fails you can still fake it by using the 'scripting api', just call .show() and .hide()
但是，如果所有其他方法都失败了，您仍然可以使用“脚本 API”来伪造它，只需调用 .show() 和 .hide()
Edit:
编辑：
Since click, click doesn't work exactly as I thought it would, I offer you a workaround. I really hope that there's a nicer way to achieve the same result though. I tested it with a local copy of http://flowplayer.org/tools/tooltip/index.htmland it works as expected.
由于单击，单击并不像我想象的那样工作，我为您提供了一个解决方法。我真的希望有更好的方法来实现相同的结果。我用http://flowplayer.org/tools/tooltip/index.html的本地副本对其进行了测试，它按预期工作。
var tooltip = $("#dyna img[title]").tooltip({
events: {
def: ",", // default show/hide events for an element
tooltip: "click,mouseleave" // the tooltip element
},
// tweak the position
offset: [10, 2],
// use the "slide" effect
effect: 'slide'
// add dynamic plugin with optional configuration for bottom edge
}).dynamic({ bottom: { direction: 'down', bounce: true } });
tooltip.click(function() {
var tip = $(this).data("tooltip");
if (tip.isShown(true))
tip.hide();
else
tip.show();
});
But I suggest you take a look at qTip as suggested by user834754 as well, you might like it more.
但是我建议您也按照 user834754 的建议查看 qTip，您可能会更喜欢它。
回答by Gaurav
It is possible to open a jQuery UI tooltip (jQuery UI version 1.10.2) on a click event. Add titleattribute to an element other than the element on which the tooltip is to be displayed.
可以在单击事件上打开 jQuery UI 工具提示（jQuery UI 版本 1.10.2）。将title属性添加到要显示工具提示的元素以外的元素。
<span id="helpbutton" title="This is tooltip text">Help</span> <!-- tootltip would be displayed on click on this -->
<input id="inputbox"></input> <!-- help to be displayed for this element -->
Initialize the tooltip on the element that has title attribute with position set to the target element.
在具有标题属性且位置设置为目标元素的元素上初始化工具提示。
$("#helpbutton").tooltip({position: {of: "#inputbox", at: "right"}});
Call openon the tooltip in the callback function of the clickevent on the target element.
在目标元素上点击事件的回调函数中，在工具提示上调用open。
$("helpbutton").click(function() {
$("#helpbutton").tooltip("open");
});
回答by shennyL
u can try use qTip, u can bind any jquery event on it:
您可以尝试使用 qTip，您可以在其上绑定任何 jquery 事件：
show: { when: { event: 'click' } }
A simple and pretty plugin :) http://craigsworks.com/projects/qtip/docs/reference/#show
一个简单漂亮的插件:) http://craigsworks.com/projects/qtip/docs/reference/#show
回答by shennyL
if you prefer a simple, lightweight tooltip, you can consider http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/then simply bind the onclick jquery event to it.
如果你更喜欢简单、轻量级的工具提示，你可以考虑http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/然后简单地将 onclick jquery 事件绑定到它。
回答by aruanoc
You can also do:
你也可以这样做：
$("#myTooltip").tooltip().off("mouseover").on("click", function() {
if ($(this).attr("visible") === "1") {
$(this).attr("visible", "0");
return $(this).tooltip("close");
} else {
$(this).attr("visible", "1");
return $(this).tooltip("open");
}
}).on("mouseleave", function(event) {
return event.stopImmediatePropagation();
});
