jQuery工具提示onClick？

Question

我一直在寻找很长一段时间,似乎无法找到一个利用以下内容的jQuery工具提示插件:

onClick(而不是hover使其像切换按钮一样工作)
淡入/淡出

使用工具提示的想法是,我有我想要显示的内容中的几个环节.虽然正常工具提示(这可能是我哪里错了..)是徘徊,它需要的是一个被点击切换链接触发它.

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

Answer 1

我不知道该怎么你一直在寻找但快速谷歌搜索jQuery的工具提示给我 http://flowplayer.org/tools/tooltip/index.html(在使用他们的滚动插件有一段时间了,真的很喜欢它:)

来自他们的网站:

jQuery Tooltip允许您完全控制何时显示或隐藏工具提示.您可以为不同类型的元素指定不同的事件.您可以使用默认情况下具有以下值的事件配置变量来控制此行为:

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
}

使用'click'应该可以解决问题.(我没有测试过)

但是,如果所有其他方法都失败了,你仍然可以通过使用'scripting 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,您可能更喜欢它.