jQuery工具提示onClick？

我已经寻找了很长一段时间，似乎找不到一个使用以下功能的jQuery工具提示插件：

onClick

（而不是

hover

，使其像切换按钮一样工作）
淡入/淡出

使用工具提示的想法是，我有几个链接，我想在其中显示内容。虽然正常的工具提示（这可能是我出错的地方…）是用于悬停的，但它必须是通过单击触发它的链接来切换的

---

有没有比使用工具提示更好的方法呢？

我不知道你是怎么看的，但是在谷歌上快速搜索jquery工具提示给了我答案 （使用他们的滚动插件已经有一段时间了，非常喜欢：）

从他们的网站：

jQuery工具提示允许您完全控制工具提示的显示时间 显示或隐藏。您可以为不同的类型指定不同的事件 元素的组合。您可以通过事件控制这种行为 默认情况下具有以下值的配置变量：

使用“点击”应该可以做到这一点。（我没有测试）

但是，如果其他方法都失败了，您仍然可以使用“脚本api”来伪造它，只需调用.show（）和.hide（）

编辑：

由于click，click并不像我想象的那样工作，我为您提供了一个解决方案。 我真的希望有更好的方法来达到同样的效果。 我用一个本地的副本测试了它，它工作正常

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();
});

---

但是我建议您也看看用户834754建议的qTip，您可能会更喜欢它。

您可以尝试使用qTip，您可以在上面绑定任何jquery事件：

show: { when: { event: 'click' } }

---

一个简单漂亮的插件：

如果你喜欢一个简单、轻量级的工具提示，你可以考虑简单地将OnCutsJQuery事件绑定到它。p> 可以在单击事件上打开jQuery UI工具提示（jQuery UI版本1.10.2）。 将“标题”属性添加到要显示工具提示的元素以外的元素

<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 -->

在目标元素上单击事件的回调函数中的工具提示上调用open

$("#helpbutton").tooltip({position: {of: "#inputbox", at: "right"}});

$("helpbutton").click(function() {
    $("#helpbutton").tooltip("open");
});

来源：

您还可以执行以下操作：

$("#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();
});

---

为什么会被否决？这是一个合理的问题，下面是一个需要澄清的问题。我看过这个问题，唯一不喜欢的是图像的使用，因为我想使用CSS作为工具提示。我也使用这个工具，你可以使用纯CSS作为工具提示，更彻底地阅读文档。这一个的主要问题，无法允许切换工具提示。使用

单击，单击
以查看
事件：
不起作用。好的，我看到这里发生了什么。单击似乎会同时触发两个事件。请注意，这适用于版本1。对于版本2，它现在将显示：{event:'click'}（），它对我有效。我在这个问题上花了一些时间，stopImmediatePropagation（）方法救了我一天！。
$("#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();
});