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，您可能会更喜欢它。

Answer 2

可以在点击事件上打开jQuery UI工具提示（jQuery UI版本1.10.2）。将 title 属性添加到要显示工具提示的元素以外的元素。

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

在具有title属性且位置设置为目标元素的元素上初始化工具提示。

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

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

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

来源：Floating help box with jQuery UI tooltip

Answer 3

你可以尝试使用qTip，你可以绑定任何jquery事件：

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

一个简单而漂亮的插件:) http://craigsworks.com/projects/qtip/docs/reference/#show

Answer 4

如果您更喜欢简单，轻量级的工具提示，您可以考虑http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/然后只需将onclick jquery事件绑定到它。

Answer 5

你也可以这样做：

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

jQuery工具提示onClick？

5 个答案: