jQuery 工具提示 onClick？

Question

我已经找了很长时间，但似乎找不到使用以下内容的 jQuery 工具提示插件:

onClick(代替 hover，使其像切换按钮一样工作)
淡入/淡出

使用工具提示的想法是我有几个链接，我想在其中显示内容。虽然正常的工具提示(这可能是我出错的地方..)用于悬停，但它需要是一个由单击触发它的链接。

有没有比使用工具提示更好的主意？

Answer 1

我不知道你是怎么看的，但谷歌快速搜索 jquery tooltip 给了我 http://flowplayer.org/tools/tooltip/index.html (使用他们的可滚动插件已经有一段时间了，真的很喜欢:)

来自他们的网站:

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:

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
}

使用“点击”应该可以解决问题。 (我没测试)

然而，如果所有其他方法都失败了，您仍然可以使用“脚本 api”伪造它，只需调用 .show() 和 .hide()

编辑:

由于点击，点击并不像我想象的那样有效，我为您提供了一个解决方法。 我真的希望有更好的方法来实现相同的结果。 我用 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();
});

但是我建议你也看看user834754推荐的qTip，你可能会更喜欢它。