jquery 工具提示，但点击而不是悬停
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1313321/
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, but on click instead of hover
提问by Dustin Getz
We were using 'title' attributes to display something on mouseover. We want it now to display on a click. How can I get a floating box that looks like a title/tooltip, but can be shown and hidden on demand instead of being tied to a hover?
我们使用 'title' 属性在鼠标悬停时显示某些内容。我们现在希望它在单击时显示。如何获得一个看起来像标题/工具提示的浮动框，但可以按需显示和隐藏而不是绑定到悬停？
回答by marcgg
If you feel like handcoding it, this should do the job:
如果你想手工编码，这应该可以完成这项工作：
The html:
html：
<div id="tooltip" style="display:none;">bla bla</div>
<div id="yourLink">Click here to show the tooltip!</div>
And the JS:
和JS：
$('#yourLink').click(function(){
$('#tooltip').toggle();
});
You just need to style correctly the tooltip div
您只需要正确设置工具提示 div 的样式
There are also nice tooltip plugins out there. iftrue mentioned one, there is also this one
还有很好的工具提示插件。iftrue提到了一个，还有这个
回答by Stefan Kendall
You might want to try this library:
你可能想试试这个库：
http://craigsworks.com/projects/qtip/
http://craigsworks.com/projects/qtip/
And then simply call .qtip on a .click event handler.
然后简单地在 .click 事件处理程序上调用 .qtip 。
$('#myInput').click(function(){/*insert qtip code here*/});
Note: you can grab the title attribute dynamically to use that content in the qtip tooltips, if you so choose.
注意：如果您愿意，您可以动态获取 title 属性以在 qtip 工具提示中使用该内容。
回答by Fabian
Would like to add to iftrue's answer that you can grab (and remove) the title attribute in the mouseenter event and place it back in the mouseleave. This to prevent the browser from showing the hover, but still using the attribute to store the text.
想添加到 iftrue 的答案中，您可以在 mouseenter 事件中获取（并删除）title 属性并将其放回 mouseleave 中。这是为了防止浏览器显示悬停，但仍然使用该属性来存储文本。
