jQuery工具提示onClick？ [英] jQuery tooltip onClick?

问题描述

我一直在寻找很长时间，似乎找不到一个jQuery tooltip插件利用以下：

I have been looking for a long time now and can't seem to find a jQuery tooltip plugin that utilizes the following:

onClick （而不是 hover ，使其像切换按钮一样工作）

淡入/淡出

onClick (Instead of hover, making it work like a toggle button)
Fade In/Fade Out

使用工具提示的想法是我有一些链接，我想显示内容。虽然正常的工具提示（这可能是我错了..）是悬停，它需要

The idea for using tooltips is that I have a few links which I want to display content in. While normal tooltips (this is probably where I went wrong..) are for hovering, it needed to be one that was toggled by clicking on the link triggering it.

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

Are there better ideas for this than using a tooltip?

推荐答案

我不知道你一直在寻找，但快速google搜索jquery tooltip给了我
http://flowplayer.org/tools/tooltip/index.html （一段时间以来一直使用他们的可滚动插件，真的很喜欢：）

I don't know how you've been looking but a quick google search for jquery tooltip gave me http://flowplayer.org/tools/tooltip/index.html (been using their scrollable plugin for some time now, really like it :)

：

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

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
}

使用click应该做的伎俩。 （我没有测试它）

using 'click' should do the trick. (I didn't test it)

然而，如果所有其他失败，你仍然可以通过使用'scripting api'，只需调用.show（）和。 hide（）

however, if all else fails you can still fake it by using the 'scripting api', just call .show() and .hide()

编辑：

点击后无法点击正如我认为它会，我给你一个解决方法。
我真的希望有一个更好的方法来实现相同的结果，虽然。
我使用本地副本 http://flowplayer.org/tools/tooltip/index.html 并且按预期工作。

Since click, click doesn't work exactly as I thought it would, I offer you a workaround. I really hope that there's a nicer way to achieve the same result though. I tested it with a local copy of http://flowplayer.org/tools/tooltip/index.html and it works as expected.

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

但我建议你看看qTip，如user834754建议，你可能更喜欢它。

But I suggest you take a look at qTip as suggested by user834754 as well, you might like it more.

这篇关于jQuery工具提示onClick？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！