jquery工具提示，但点击而不是悬停

Question

我们使用'title'属性在鼠标悬停时显示内容。我们现在希望它在点击时显示。如何获得一个看起来像标题/工具提示的浮动框，但是可以按需显示和隐藏而不是绑定到悬停？

Answer 1

如果您想要手动编码，这应该可以胜任：

html：

<div id="tooltip" style="display:none;">bla bla</div>

<div id="yourLink">Click here to show the tooltip!</div>

和JS：

$('#yourLink').click(function(){
  $('#tooltip').toggle();
});

您只需要正确设置工具提示div的样式

还有很好的工具提示插件。 iftrue提到了一个，还有this one

Answer 2

您可能想尝试使用此库：

http://craigsworks.com/projects/qtip/

然后只需在.click事件处理程序上调用.qtip。

$('#myInput').click(function(){/*insert qtip code here*/});

注意：如果您愿意，可以动态获取title属性以在qtip工具提示中使用该内容。

Answer 3

想要添加iftrue的答案，你可以在mouseenter事件中获取（并删除）title属性并将其放回mouseleave中。这样可以防止浏览器显示悬停，但仍然使用该属性来存储文本。